带有对齐中心的css内联块

Question

我想要一个与内容具有相同宽度的div，由display: inline-block;完成 但是当我使用它时，text-align: center不再工作了。
所以我的内容只是左转，内联块适用于它 像这样：

#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
text-align: center;
}

它不再使div的文本居中 我怎么能得到这两个效果？

Answer 1

将属性text-align：center赋予任何其他元素，并在div中使用该元素。

例如

#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
}
#p1 {
text-align: center;
}

然后

<div id="div1">
        <p id="p1">blah blah blah</p>
</div>

这应该有效。

Answer 2

获得相同的div是width而非display的作品。当您使用text-align此属性时，将应用于元素的所有子项。

例如，在

中

<div>
 <span>Text</span>
 Text
</div>

span {
  text-align: center;
}

这将应用于文本，而不是跨度。这样，您将使文本与中心对齐，但跨度仍将位于其自己的位置left，并且默认位于前一个元素的下方。

要检查是否正在应用text-align，您可以尝试在开发人员工具中检查子项的属性。

Jsfiddle：http://jsfiddle.net/afzaal_ahmad_zeeshan/eKrNt/

您可以看到，该属性已应用于div，而不是自身。是那个与中心保持一致的孩子。

您的代码：

#div1 {
 position: relative;
 bottom: 10px;
 left: auto;
 text-decoration: overline underline;
 display: inline;
 text-align: center;
}

这是一个明确的答案，您将此div内的文本与中心对齐。

鼠标悬停事件必须位于函数或脚本中的某个位置。哪个是在hover事件或同一事件上触发的。

Answer 3

尝试使用：

margin-left:auto;
margin-right:auto;

在你想要居中的div的父div中。