Горизонтальное выравнивание, с текстом в верхней части изображения?

Ся! У меня есть текст на той стороне изображения, которое я хочу. Как видно ниже.

https://image.ibb.co/bWWO0F/Capture.jpg

Тем не менее, я изо всех сил пытаюсь получить текст в верхней части изображения, как мой удивительный рисунок здесь...

https://image.ibb.co/ksgZ7v/Capture1.jpg

Как я могу это сделать?

Вот мой HTML...

<div>
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="image.jpg">
    <p>Works.</p>
</div>
Источник

2 ответа

Решение

Используйте flexbox.

.flexbox {
  display: flex;
  border: 1px solid;
  padding: 15px;
}

.img-circle {
  border-radius: 100%;
}
<div class="flexbox">
  <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="http://placehold.it/350x350">
  <p>Works.</p>
</div>

Источник

Используя тег break, вы можете сделать это с помощью простого HTML.

<label>Text</label>
<br>
<img>

Да, это так просто, но это не так расширяемо. Я имею в виду, хорошо, вы можете разделить линии, но вы на самом деле не определяете высоту или положение или вообще что-то. Для того, чтобы сделать это правильно и не небрежно, вам нужно реализовать CSS.

Источник
Другие вопросы по тегам