Skip to main content
P
Pan22697824aymj
Participant
January 25, 2022
Question

Centering site

  • January 25, 2022
  • 4 replies
  • 740 views

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>

   <center>

            *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>       

<!-- Place contents here for absolute centering -->                  

</td>     

</tr>   

</table> 

</body>

</html>

 

    This topic has been closed for replies.

    4 replies

    P
    Paul-M
    Legend
    January 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
    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    January 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.

    1. https://caniuse.com/?search=flex
    2. https://caniuse.com/?search=grid

     

    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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 26, 2022
    quote

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

    1. https://caniuse.com/?search=flex
    2. 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
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 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
    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    January 26, 2022
    quote

    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?

    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    January 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>
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices