We help IT Professionals succeed at work.

css center page horizontally

rflorencio
rflorencio asked
on
I have several elements, but is left-aligned, how can center on page horizontally.
Comment
Watch Question

Project Lead
Top Expert 2011
Commented:
Try this


<html>
  <head>
    <style>
      div.centerBlock {
      margin-left: auto;
      margin-right: auto;
      width: 6em
    }
    </style>
  </head>
  <body>
    <div class="centerBlock">
      <table>
        <tr><td><input type="text"></td></tr>
        <tr><td>Simple Text</tr>
        <tr><td><select><option>Test Option</option></select></tr>
        
      </table>
    </div>
  </body>
</html>

Open in new window

or if you have a single container div, say 960px wide, set the margin in css as' 0 auto 0 auto', so that it sits centrally (like the central column on this site)
LZ1
Top Expert 2011
Commented:
Can we see your CSS/HTML markup? Typically the above answers are correct in centering block-level elements such as divs, tables, headings, etc.  

Spans, p-tags and text require inline centering with text-align:center;.

So we would need to know a little bit more about what your centering and the structure of your document.

Author

Commented:
I do not know how or why but the problem was in this style, not allow center other elements:

form {                  
      width: 420px;
}
LZ1
Top Expert 2011

Commented:
If your entire page is enclosed in a <form> tag, then the width of that form will dictate the relative centering position of the enclosed elements.
Do you mean its form elements for user input that you want centered?