具有对齐中心的 css 内联块

Question

我想要一个与 display: inline-block; 完成的内容宽度相同的 div
但是当我使用它时，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

尝试使用这个：

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

在您要居中的 div 的父 div 中。

Answer 3

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

例如，在

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

span {
  text-align: center;
}

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

要查看text-align是否被应用，可以尝试在开发者工具中查看child的属性。

为此的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 事件或相同事件上触发。