div/class 不会水平对齐答案

【问题标题】：Div/class won't horizontally aligndiv/class 不会水平对齐
【发布时间】：2014-05-15 09:07:38
【问题描述】：

为什么我为 .banner-logo-content 类设置为 auto 的 margin-right 和 margin-left 没有使 div 居中？

这是我的 CSS

@import 'bootstrap';

.navbar {
    border-radius: 0px;
    font-size: 16px;
    padding-left: 150px;
    padding-right: 150px;
    margin: 0px;
    background-color: white;
}

.navbar-default .navbar-nav > li > a {
    color: #f0ad4e
}

.navbar-brand {
    font-size: 22px;
}

.navbar-default .navbar-brand {
    color: #f0ad4e;
}

.banner-home {
    height: 400px;
    background-color: #f0ad4e;
    padding: 100px;
}

.banner-logo-container {
    width: 1170px;
    margin: 30px;
    border: 1px solid;
}

.banner-logo-content {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
    font-size: 108px;
    color: white;
}

这是我的页面：

<div class="banner-home">
      <div class="col-md-12">
        <div class="banner-logo-container">  
          <span class="banner-logo-content">E!</span>
        </div>
        <div class="banner-text">
          <p>Crowdsourcing Scientific Innovation</p>
        </div>
      </div>
</div>

【问题讨论】：

banner-logo-content 是一个跨度，这意味着它是内联显示。您可以将text-align: center 放在banner-logo-container 上，并在徽标内容范围内获得自动边距
容器不会使用此解决方案调整大小并在小屏幕上被截断。我怎样才能让它充满活力？
jsfiddle.net/uw77f 我已将宽度设置为 100%，因此框在调整大小时变为动态。

标签： css class twitter-bootstrap html

【解决方案1】：

在 .banner-logo-content 的 CSS 中添加 text-align:center

http://jsfiddle.net/2b8Hs/1/

【讨论】：

请注意 OP 代码中的 <span class="banner-logo-content">E!</span>，您的代码中是 div
为什么我用这个解决方案调整浏览器大小时容器不会调整大小？

【解决方案2】：

您应该参考这篇文章来了解它为什么不起作用：

Why margin:auto doesn't work?

【讨论】：