H2はテキストと同じ幅でなければなりませんが、text-align：center

Question

私は各列の上部にH2タグを持つ2つの列を持っています。 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

テキストアラインメントを追加：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

あなたは-ALIGNをテキストに、コンテナの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>