html - 具有对齐中心的 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 的文本居中。
我怎样才能同时获得这两种效果？

score 2 · Accepted Answer

Give the property text-align:center to any other element, and use that element inside your div.

eg.

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

and then

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

That should work.

score 0 · Accepted Answer

尝试使用这个：

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

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

score 0 · Accepted Answer

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

例如，在

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

span {
  text-align: center;
}

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

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

您可以看到，该属性应用于div，而不是其自身。是孩子，他与中心对齐。

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

这是明确的答案，您正在将此 div 内的文本对齐到中心。

而且 mouseover 事件必须在函数或脚本中的某个地方。hover在事件或相同事件上触发。

3 回答 3