Выполняет выравнивание по центру динамического текстового элемента с помощью 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/

Я пробовал все видывариации в соответствии с аналогичными вопросами в Stack Overflow, но без удачи.

Любая помощь будет оценена.

Приветствия, Benet

Answer 1

Я думаю, что он хочет центрировать натянутый текст .recipethisweek.

Не плавай. У вас уже есть дисплейный блок и text-align: center, так что это должно быть сделано. Также мне кажется, что вам нужно удалить отрицательное верхнее поле, поскольку оно перекрывает рамку изображения.

Answer 2

Если я правильно понял, вы хотите сделать текст по центру элемента h2;

Вы можете использовать ниже;

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

вместо

<h2>Recipe of the week</h2>

Вы можете легко дать эффект элементу h2 с помощью CSS.