How to get every line of text / elements of a page centered horizontally?

Question

I am trying to have every line of text/elements centered horizontally so that my page looks lke this https://hootsuite.com/. How do I style the page in CSS to look like that ?

Here is my page :

    <div class ="wrap">
   <% if user_signed_in? %>
   <div class="row">
    <aside class="col-md-4">
   <section class="user_info">
    <%= render 'shared/user_info' %>
   </section>
  <hr/>
  <br/>
  <section class="stats">
      <%= render 'shared/stats' %>
     </section>
     <section class="post_form">
    <%= render 'shared/post_form' %>
     </section>


    </aside>
    <section class="post_feed">
    <br>
      <h3>Post Feed</h3>
      <%= render 'shared/feed' %>
     </section>
    </div>
    </div>
   <% else %>

   </aside>
  <div class="row">
  <div class="fb-like"
  data-share="true"
  data-width="450"
  data-show-faces="true"></div>

  <h2>Join <%= [2000, User.all.count].max %>+ artists.</h2>

 <!-- <iframe src="terms" width= "100%" height= "600"></iframe>-->
 <form class="form-horizontal">
 <fieldset> 
  <div class="form-group">

  <div class="col-lg-10">
    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
  </div>
</div>
<div class="form-group">

  <div class="col-lg-10">
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    <div class="checkbox">
      <label>
        <input type="checkbox"> I agree to the terms and conditions.
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-lg-10 col-lg-offset-2">
    <button type="reset" class="btn btn-default">Log in</button>
    <button type="submit" class="btn btn-primary">Sign up</button>    
  </div>
</div>
</fieldset>
</form>
   <button type="submit" class="btn btn-info"><i class="fa fa-facebook"></i>  Login with Facebook</button>
   <br/>
   <br/>
   <button type="submit" class="btn btn-primary"><i class="fa fa-twitter">   </i>  Login  with  Twitter   </button>
<br/>
<br/>
 <button type="submit" class="btn btn-default"><i class="fa fa-linkedin"></i>  Login  with  LinkedIn</button>
 <br/>
 <br/>
    <button type="submit" class="btn btn-primary btn-warning"><i class="fa fa-google"></i>  Login with Google  </button>
   <br/>

</div>
</section>
</div>
<%end%>
</div>

And my CSS:

.wrap{
 display: inline-block
 text_align: center ;
 width:50%;
 margin-left: auto ;
 margin-right: auto ;
   }

possible duplicate of [How do you easily horizontally center a
using CSS?](http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) — Marc B, May 22 '15 at 16:55

score 1 · Answer 1 · answered May 22 '15 at 16:59

body {
text-align: center;
margin-left: auto;
margin-right: auto
}

Note that elements that aren't inline, such as divs, will need to have a width defined in order for the margin: left/right styles to work.

Example:

.example-style {
width: 50%;
}

<div class="example-style">This content will be aligned in the center because all body elements are set to be centered by default.</div>

score 1 · Accepted Answer · answered May 22 '15 at 17:00

Not everything is centered on that page. The body text is aligned to the left. There are a couple of ways to center things.

1) adding the rule text-align: center to an element aligns to the center the child elements that don't have full width.

2) adding width: 50%; margin-left: auto; margin-right: auto aligns to the center an element that has a fixed width.

3) You can center things using flexbox. Go here to learn more abou this.

I think this should answer your questions.

score 0 · Answer 3 · answered May 22 '15 at 16:55

0

Setting elements as display: inline-block with text-align: center on the parent element will center most elements, as long as you aren't using any floats.

answered May 22 '15 at 16:55

essmahr

676
4
15

How to get every line of text / elements of a page centered horizontally?

3 Answers3