Chonchol Mahmud Chonchol Mahmud - 4 years ago 114
HTML Question

How can I bring all content to the center of page?

I added

margin:0 auto;
in
.wrapper
class for bringing all content to center. I have couple of questions:


  1. Is
    margin:0 auto;
    enough for centering content?

  2. How to solve centering problem in my case?



This is my style.css file.

*{
margin: 0;
padding: 0;
outline: 0
}
body {
font-size: 15px;
line-height: 25px;
font-family: arial
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.form_area {}


And This is my index.html file.

<div class="wrapper">
<div class="header">
<ul>
<li><a href="">Hello</a>
</li>
<li><a href="">Hello</a>
</li>
<li><a href="">Hello</a>
</li>
<li><a href="">Hello</a>
</li>
</ul>
</div>
<div class="form_area">
<form action="" method="POST">
<table>
<tr>
<td>First Number :</td>
<td>
<input type="number" name="numOne" placeholder="Input Your First Number">
</td>
</tr>
<tr>
<td>Second Number :</td>
<td>
<input type="number" name="numTwo" placeholder="Input Your Second Number">
</td>
</tr>
<tr>
<td>
<input type="reset" name="reset" value="Reset">
</td>
<td>
<input type="submit" name="submit" value="Calculate">
</td>
</tr>
</table>
</form>
</div>
</div>




Working DEMO

Answer Source

Few points to consider..

  1. The width of the .wrapper that you want to center has to be less than the .container. in order to to see a noticable difference. In your example, the width of the wrapper is so wide that it cannot be "centered"!. Try setting the width to something smaller maybe like, 400px.

  2. The content that you want to 'center' also matters. Like if you want

    1. To center the text then just use the text-align:center; property.
    2. To center each element then make them display as inline-block and then set the text-align:center; property of the parent.
  3. If you have applied float to the .wrapper or any element that you wish to center, then margin: 0 auto; wont work. Because the float disturbs the normal flow of the document and pulls the element out of the normal flow.

As per your comments.

Just Introduce another div lets say .centered inside the .wrapper and encompassing the content to be centered. And assign a smaller width to it and set margin: 0 auto;. It should center with respect to the .wrapper . JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download