css - 为什么容器不居中?

标签 css

为什么背景色为 f0f0f0 的容器不以我为中心?我给了父元素 text-align: center 的 css 样式,但它似乎忽略了它?

http://codepen.io/ELiHimself/pen/qOXVYJ

<body>

  <header></header>

  <section class="container">
      <div class="box" id="box1">box1</div>
      <div class="box" id="box2">box2</div>
      <div class="box" id="box3">box3</div>  
  </section>


</body>

萨斯

*
  margin: 0

body
  text-align: center

.container
  max-width: 1170px
  padding-top: 100px
  background-color: #f0f0f0

header
  height: 100px
  background-color: red

.box
  padding: 100px
  border: 1px solid black
  display: inline-block

最佳答案

section是一个 block 级元素。申请:

.container {
    ...
    margin: 0 auto;
}

到您的容器,它应该可以正常工作。

关于css - 为什么容器不居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33086733/

相关文章:

css - 如何使用 Angular json 模式表单创建多个表单选项卡?

css - 管理员更改主题

php - 将大文本分成列

css - 没有 float 的网格列

php - 使用自定义主题时,Drupal 7 仪表板不适合屏幕

javascript - 帮我理解 JS + CSS + HTML = Cool UI

html - 垂直对齐列出元素

html - 如何避免 Chrome 中子像素的 overflow-x 问题

javascript - 模拟宽度 : calc(100%) - with jQuery not working

css - 如何将 -moz 和 -o 前缀添加到仅包含 -webkit 标签的代码