问题中心对齐动态文本元素与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跨越文本。

不要浮动它。你已经有显示块和文本对齐：中心，所以应该这样做。此外，它看起来像我需要删除负边缘，因为它与图像帧重叠。