如何使页面的每一行文本/元素水平居中？

Question

我试图让每一行文本/元素水平居中，以便我的页面看起来像 https://hootsuite.com/。 如何在 CSS 中设置页面样式以使其看起来像这样？

这是我的页面：

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

还有我的 CSS：

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

Answer 1

在父元素上将元素设置为 display: inline-block 和 text-align: center 将使大多数元素居中，只要您不使用任何浮点数。

Answer 2

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

请注意，非内联元素（例如 div）需要定义宽度才能使 margin:left/right 样式起作用。

例子：

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

Answer 3

并非所有内容都以该页面为中心。正文向左对齐。有几种方法可以使事物居中。

1) 将规则text-align: center 添加到元素中会使没有全宽的子元素居中对齐。

2) 添加width: 50%; margin-left: auto; margin-right: auto 使具有固定宽度的元素居中对齐。

3) 你可以使用 flexbox 来居中。转至here 了解更多信息。

我认为这应该可以回答您的问题。