怎样在一个<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.coder.work/article/3343555  转载请保留出处。

相关文章:

java - 从一个多层嵌套循环中直接跳出

Java将数组转换为List

javascript - Javascript从网址中删除Ampersand “amp;”

html - 如何使底部的两个图像位于CSS的顶部的两个图像之下?

JSF, Servlet 和 JSP (三种技术)有什么区别

Apache Camel是什么

java - 实现Runnable接口(interface) 和 继承Thread类

JSON内容的HTTP Header该怎么填?

javascript - 如何使用JQuery在HTML中创建带有引号包括字符串参数的onclick javascript链接?