Centering site

Report · Jan 25, 2022

Good morning,

Finally I found the way to center a site both horizontally and vertically after exporting the file from fireworks.

The file is always on the left of your browser.

All you have to do is import the file to dreamweaver and use this code:

Center horizontally

<body>

*Your Code Here*

</center></body>

Center vertically & horizontally

<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<style type="text/css">

html, body { height: 100%; padding: 0; margin: 0; }

table { text-align: center; height: 100%; width: 100%; border: 0; }

</style>

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

Report · Jan 25, 2022

Although the Fireworks code is no longer a fresh code, I don't think it's necessary to further accentuate your code by employing tags and layout technique that are no longer recommended at all.

The CENTER tag is deprecated - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Using the TABLE tag for displaying content is also not a way to go (even if Fireworks is fond of it), use CSS instead.

So, I would recommend exploring this minimalist version of code down below to get vertical and horizontal centering.

Of course, the code is reduced to the minimum and should be completed according to your needs.

<!doctype html>
<html>
  <head>
   <meta charset="utf-8">
   <title>Document sans nom</title>
   <style>
     .main {
       padding: 0;
       margin: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100vh;
     }
   </style>
  </head>
  <body>
   <div class="main">
     <div class="sub">
     <img src="https://via.placeholder.com/300" alt="">
     <p>image</p>
     </div>
   </div>
  </body>
</html>

Report · Jan 25, 2022

@Pan22697824aymj,

You're leaping from the frying pan into the fire. This is not good web design. I call your attention to this notice on MDN's website about the <center> tag.

Use CSS Grids for layout instead of tables.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - Vertical Centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
width:100%;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
.container {
padding: 2%;
width: 75%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
font-family: 
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
color:#FFF;
font-size: calc(16px + 1vw);
line-height: calc(1.4em + 0.5vw);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Grids!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>I'm vertically &amp; horizontally centered.</p>
</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 26, 2022

You're leaping from the frying pan into the fire. This is not good web design. I call your attention to this notice on MDN's website about the <center> tag.

I'll be curious to see how the screenshot of the link I provided in my previous post, brings more clarity... Unless you want to point out something I missed?

Report · Jan 26, 2022

In addition to what @Nancy OShea says, the use of GRIDS or FLEX is quite versatile.
However, check your target for the cross-browser aspect. FLEX is older so, in my opinion, better supported.

Now, if you are directly integrating FW content (itself using TABLE, which, depending on the purpose, the speed of implementation and the flexibility of use, is not catastrophic in itself) in the center of your code, I would opt for a FLEX based host (less gap between the two technologies).

Well, as @Nancy OShea recommends, consider gradually switching to a more sustainable alternative solution instead of FW HTML export.

Report · Jan 26, 2022

FLEX is older so, in my opinion, better supported.

https://caniuse.com/?search=flex

https://caniuse.com/?search=grid

========

In 2022, I see no reason not to use Level 1 Grids for primary layouts. Good modern browsers all support it.

As of January 2016, Microsoft ended support for IE9 and IE10. Nobody cares much about legacy browsers anymore. The sooner they fade away, the better. 😁

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 27, 2022

In view of the OP's questioning employing FW code as the main content probably means that end users may be equipped with browsers not necessarily up to date.

However, I would have two comments:
- Maybe your personal target users are using the latest browsers, but you'd be surprised how many corporate users I work for are still running IE and using older versions of android.
- In another side, I've always felt a sort of excitement for the latest technology, while FLEX works great in a broad way and solves so many things compared to FLOAT. GRIDS is certainly very promising and opens so many doors, but let's not be so quick to bury FLEX, especially for simple H V positioning. Don't you think?

Report · Jan 27, 2022

I'm not abandoning Flex. I still use it. But Grid is easier for newbies to learn and does much more... All except inferior browsers support Flex & Grids. Worst case scenario, inferior browsers ignore CSS they don't understand -- no multi-columns for you, boo, hoo, hoo. 😭

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 28, 2022

I did not understand that the OP wanted to learn any CSS technology. It seems to me that the OP simply wanted to center vertically and horizontally a content he was exporting from FW.

In that sense, FLEX only needs three CSS properties to do the job and it will certainly work on older browsers (Desktop and Mobile) that did not yet support GRIDS.

Report · Jan 26, 2022

Hi - just to reiterate the markup from Fireworks exported HTML is way to old and outdated for today's web standards. The center tag is also obselete (although it may work)...

I would suggest the basics of HTML5 and CSS Grid for layout which is surprisingly easy to learn.

Paul-M - Community Expert