需要H2不僅要與文本一樣寬，還要與text-align：center相同

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 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，這將使具有display：inline-block的h2居中

 <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>