CSSで動的テキスト要素を整列させる問題点

Question

動的な幅でテキスト要素を中央に配置しようとしています。

HTML：

<div class="healthyrecipes"> 
<h2>Recipe of the week</h2> 
<a href="link"><img src="image" alt="Dip - hommus"> 
</a> 
<span class="recipethisweek">Dip - hommus</span> 
</div> 

CSS：で

.recipethisweek { 
display: inline-block; 
float: left; 
height: 16px; 
left: 30px; 
padding: 0 5px; 
position: relative; 
text-align: center; 
top: -20px; 
vertical-align: text-top; 
width: auto; 
} 

完全なコードは次のとおりです。http://www.betterhealth.vic.gov.au/

私はスタックオーバーフローで同様の質問に応じたバリエーションのすべての種類を試してみたが、運がない。

ご協力いただければ幸いです。

乾杯、 ベネット

Answer 1

私は右理解していれば、あなたが中心H2要素のテキストを作りたいです。

以下で使用できます。代わりに、あなたは簡単にCSSで効果がh2要素を与えることができます

<h2>Recipe of the week</h2> 

の

<div style="text-align:center;">Recipe of the week</div> 

。

Answer 2

私は彼が.recipethisweekスパンテキストを中心にしたいと思います。

フロートしないでください。すでにdisplay blockとtext-align：centerがあるので、それを行う必要があります。また、画像フレームが重なっているので、ネガティブな上部マージンを削除する必要があるように見えます。