問題中心對齊動態文本元素與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元素的文本;

您可以在下面使用;

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

代替

<h2>Recipe of the week</h2> 

您可以輕鬆地落實h2元素的CSS。

Answer 2

我想他想要集中.recipethisweek跨越文本。

不要浮動它。你已經有顯示塊和文本對齊：中心，所以應該這樣做。此外，它看起來像我需要刪除負邊緣，因爲它與圖像幀重疊。