css如何将元素水平居中

757 0 0

作者:python之恋

如何使用CSS<div>在另一个文件中水平居中<div>？

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

解决方案：

您可以将此CSS应用于内部<div>：

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将设置width为50%。小于包含宽度的任何宽度<div>都可以使用。该margin: 0 auto是什么呢实际定心。

如果您以Internet Explorer 8（及更高版本）为目标，最好改用以下方法：

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定的即可工作width。

这里的工作示例：

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

本文首发于前端黑洞网，博客园同步跟新

它将使内部元素水平居中，并且无需设置特定的即可工作width。

内容来源于网络如有侵权请私信删除

文章来源: 博客园

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！