Question

我在每列的顶部有两列带有H2标签的列。 H2标记中的文字很短。标签有蓝色背景。这是问题的一部分，因为正常的内联元素，蓝色背景将跨越div列的宽度。将H2更改为display:inline-block会解决此问题，但这会引发另一个问题，text-align:center不再有效，H2标记会向左对齐。

如何将H2元素仅与文本和对齐中心一样宽？

<div style="width:auto;margin-left:auto;margin-right:auto;">
<h2 style="display:inline-block;background-color:#558ED5;color:#FFF;text-align:center;font-size:1.1em;padding:5px 10px 5px 10px;margin-left:auto;margin-right:auto;">WE OFFER 2 CLEANING OPTIONS:</h2>
</div>

Answer 1

添加text-align：center;到主要的div。像这样：

<div style="width:auto;margin-left:auto;margin-right:auto; text-align:center">
    <h2 style="display:inline-block;background-color:#558ED5;color:#FFF;text-align:center;font-size:1.1em;padding:5px 10px 5px 10px;margin-left:auto;margin-right:auto;">WE OFFER 2 CLEANING OPTIONS:</h2>
</div>

Answer 2

您应该将容器div更改为text-align：center，这将使h2具有显示：inline-block为中心

<div style="width:auto;margin-left:auto;margin-right:auto;text-align:center">
<h2 style="display:inline-block;background-color:#558ED5;color:#FFF;text-align:center;font-size:1.1em;padding:5px 10px 5px 10px;margin-left:auto;margin-right:auto;">WE OFFER 2 CLEANING OPTIONS:</h2>
</div>

需要H2仅与文本一样宽，但也需要text-align：center

2 个答案: