html - 如何在另一个div中水平居中div

标签 html css

<分区>

我试图将 div 置于一个外部 div 的中心,但我做不到。

我的 html 是这样的:

<div class="outterDiv">
  <div class="innerDivBig">
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="clear:both"/>
  </div>
</div>

我的 CSS 是这样的:

.outterDiv{
 width: 600px;
 border: 1px solid #f00;
 text-align: center;
}

.innerDivBig{
  margin: 0 auto;
  display:table;
}

这里是 jsfiddle .

最佳答案

.outterDiv{
 width: 600px;
 border: 1px solid #f00;
 text-align:center;
}

.innerDivBig{

  display: inline-block;
}

https://jsfiddle.net/2a8514nf/7/

关于html - 如何在另一个div中水平居中div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38656712/

上一篇:php - 摆脱 Wordpress 中 2016 主题页脚下方的空白

下一篇:javascript - 创建滚动到第二部分后出现的导航栏

相关文章:

javascript - font-awesome 不显示带有 React 和 Webpack 的图标(仅正方形)

CSS filter() 转换/过渡时间

html - 右侧列在 IE6/7/8 中未正确对齐

html - 如何在 Angular 6 中单击图像更改边框半径

html - 悬停效果后,仅影响3个具有相同属性的div中的一个div

javascript - 将 bassistance jquery-validator 与 formtowizard 插件一起使用

javascript - 如何减少 jquery 代码中的行数

javascript - 如何在网站链接前添加文本,fx store.mywebsite.com

html - 换行符不起作用

Jquery 从上到下和从下到上滑动以禁用按钮