CSS内联块与居中对齐

Question

7

我想要一个div，它的宽度与内容相同，可以通过display: inline-block;实现。
但是当我使用这个属性时，text-align: center就无法起作用了。
所以我的内容就向左对齐，并且应用了inline-block属性。
像这样：

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

不再居中显示文本。如何同时实现这两种效果？

- mpower

2

请创建一个JSfiddle而不是发布一个简单的请求。 - Paulie_D

1

请在此处发布完整的代码示例。 - j08691

你能否提供一些代码或演示呢？ - roemel

3个回答

0

获取相同的 div 是通过 width 而不是 display 来实现的。当您使用 text-align 属性时，该属性将应用于元素的所有子元素。

例如，在

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

span {
  text-align: center;
}

这将应用于文本，而不是span。这样，您将获得文本居中对齐，但span仍将位于其自己的位置，left并且默认情况下在前一个元素的下方。

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

您可以看到，该属性已应用于div，但是应用的是其子级。它是子级被居中对齐了。

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

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

而鼠标悬停事件必须在函数或脚本中的某个位置。它会在“悬停”事件或类似事件触发时被触发。

- Afzaal Ahmad Zeeshan

所以我该如何让一个 div 居中，并且宽度与其中的文本相同？ - mpower

为此，您可以使用text-align来设置div的父元素，例如，如果它是唯一的div，则可以使用body。或者，您可以使用margin-left和margin-right来设置某些属性。 - Afzaal Ahmad Zeeshan

我使用了#dived{margin-left:auto;margin-right:auto;}作为父级div，但它仍然靠左对齐。 - mpower

这将在应用了 max-width 或 min-width 时有效。否则它将始终保持在左侧。 - Afzaal Ahmad Zeeshan

0

尝试使用这个：

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

在你试图居中的 div 的父级 div 中。

- Scott Rowell

只是做同样的事情。 - mpower

抱歉，请尝试将其应用于实际 div 而不是父 div！ - Scott Rowell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shisa · Accepted Answer

在任何其他元素上给出属性 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>

那应该可以。