Конфликт картинок и текста под ними в html

Question

Хочу сделать круг в который можно поместить картинку картинку и текст под ней, все это должно быть в тэге <a>(хотя картинку или текст можно и без него, что то из этого должно быть ссылкой.) и отображаться в линию. Я это реализовал, вроде все работает, но когда пишу в них текст, то картинки начинают "разваливаться" по всей странице, я частично решил это через свойство float. Однако текст все равно ведет себя неадекватно особенно если он с пробелами.

.circle {
  border: 7px solid blue;
  border-radius: 100px;
  /* Радиус скругления */
  width: 10px;
  padding: 50px;
  height: 10px;
  background: url('https://i.picsum.photos/id/339/500/500.jpg?hmac=ZhgAUBAey1SZkz0i4smhORK-fjdk-QgfdFhQa7ABDm8') no-repeat;
  background-size: 80px;
  /* Масштабируем фон */
  background-position: center;
  margin: 20px 20px 100px 20px;
  left: 60px;
  position: relative;
  top: 280px;
  display: inline-block;
  /* Строчно-блочный элемент */
  line-height: 200px;
  /* Отступ для текста, что бы был снизу */
  float: left;
}

<a href="#" class="circle">Тест двойной</a>
<a href="#" class="circle">Тест еще раз</a>
<a href="#" class="circle">Тест</a>
<a href="#" class="circle">Тест</a>
<a href="#" class="circle">Тест</a>
<a href="#" class="circle">Тест</a>
<a href="#" class="circle">Тест</a>

Просьба максимально подробно объяснить решение. Ибо сам я с фронт частью не особо дружу.

Answer 1

Текст начинает разваливаться, потому что Вы попытались воспользоваться line-height как padding, что большой костыль. line-height нужно использовать только для интервала между строками текста.

В одном классе так, как Вы хотите, сделать всё крайне сложно. Здесь надо пользоваться :before/:after. Картинку выносите в псевдокласс, тогда он отрисуется доп.блоком.

Про float уже стоит забыть, используйте flexbox.

Вот так по идее должен выглядеть код:

.container {
  /* Строим сетку, блоки один за одним с переносом */
  display: flex;
  flex-wrap: wrap;
}

.circle {
  flex-shrink: 0;
  margin: 20px 20px 100px 20px;
  /* Текст по центру */
  text-align: center;
  /* Вычисляем ширину блока, чтобы переносился текст */
  width: 150px;
  /* Межстрочный интервал в тексте */
  line-height: 1.5;
  /* Внутри блока всё тоже выравниваем по центру по горизонтали */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circle:before {
  /* Элемент с картинкой отдельно */
  content: '';
  display: block;
  border: 7px solid blue;
  border-radius: 100px;
  /* Задавайте размеры явно без padding */
  width: 110px;
  height: 110px;
  background: url('https://i.picsum.photos/id/339/500/500.jpg?hmac=ZhgAUBAey1SZkz0i4smhORK-fjdk-QgfdFhQa7ABDm8') no-repeat;
  background-size: 80px;
  background-position: center;
  /* Добавляем отступ от текста */
  margin-bottom: 20px;
}

<div class="container">
  <a href="#" class="circle">Тест двойной</a>
  <a href="#" class="circle">Тест еще раз</a>
  <a href="#" class="circle">Тест с очень большим текстом</a>
  <a href="#" class="circle">Тест</a>
  <a href="#" class="circle">Тест</a>
  <a href="#" class="circle">Тест</a>
  <a href="#" class="circle">Тест</a>
</div>

БЛОГ НА HUSL

Конфликт картинок и текста под ними в html

Ответы (1 шт):