怎样在一个<div>中水平居中另一个<div>

原文 标签 IT工具网 编程 html

问题描述:我们怎样在一个 <div> 中水平居中另一个 <div>


<div id="outer">
  <div id="inner">Foo foo</div>
</div>

解决方法:
可以给内部的<div>添加下面的CSS样式:

#inner {
  width: 50%;
  margin: 0 auto;
}
当然,并不是必须设置width: 50%; ,任何小于子div的宽度都可以。margin: 0 auto;才是关键。 如果你要兼容IE8及以上的浏览器,下面的方式可以更好的替代:

#inner {
  display: table;
  margin: 0 auto;
}
它能使内部元素水平居中,而不需要设置width属性。
如果你不想给子div一个固定的宽,可以使用下面的方式:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
这使得内部div成为可以以文本对齐为中心的内联元素。

本文链接:https://www.ojit.com/article/3343555  转载请保留出处。

相关文章:

java如何将String转换为enum

JavaScript中的TDD和单元测试工具

Java将数组转换为List

json数据中可以写注释吗?

JSON内容的HTTP Header该怎么填?

html - 如何显示对其他元素的划分

Java内部类和嵌套静态类

java如何计算MD5值

html - 网站背景图片在独立文本块上按比例缩放

html - 如何在线显示这些元素?