CODEWITHSUNDEEP
htmlcss
Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

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

Upvotes: 0

Views: 347

Answers (3)

Jyotiranjan
Jyotiranjan

Reputation: 693

body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.wrapper
{
    margin: 0 auto;
    width: 20%;
    position: absolute;
    top: 25%; 
    left: 0;
    bottom: 0; 
    right: 0;
}

or use below code

.wrapper
{
   text-align: center;
}
.centered{
   display: inline-block;
   vertical-align: top;
}

if your html is like:

<div class="wrapper">
    <div class="centered">
       ......
       your content
       ......
    </div>
</div>

Upvotes: 1

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

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

Upvotes: 2

Shaher Jamal Eddin
Shaher Jamal Eddin

Reputation: 462

It is fine, but maybe your screen resolution is small, change the width to a smaller value to see it

.wrapper {width:300px; margin:0px auto;}    <!-- demo width-->

Upvotes: 1

Related Questions