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/

我根据Stack Overflow中的类似问题尝试了各种各样的变化，但没有运气。

任何帮助都将不胜感激。

干杯，贝尼特

Answer 1

如果我理解正确，你想制作居中的h2元素文本;

您可以在下面使用;

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

而不是

<h2>Recipe of the week</h2>

您可以使用CSS轻松实现h2元素。

Answer 2

我认为他希望将.recipethisweek跨文本居中。

不要漂浮它。你已经有了display block和text-align：center，所以应该这样做。此外，它看起来像你需要删除负顶部边距，因为它与图像框架重叠。

问题中心将动态文本元素与css对齐

2 个答案: