Раcпределить элементы списка с картинками

Рейтинг: 0Ответов: 1Опубликовано: 13.01.2023

Помогите победить списки с картинками и текстом Нужно чтобы li были в столбик, а тексты не вылезали под картинку и по середине по вертикали относительно картинки. В общем чтобы красиво было. :)

Всё что мне удалось, это вот так.

img {
  border: 1px solid black;
  float: left;
  margin: 1em;
}
<div class="spanclass" style="width:500px;">
  <ul class="ulclass" style="list-style: none outside;">
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum </a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</a>
    </li>
  </ul>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

ul {
  display:flex;
  flex-direction: column;
}
ul li a {
 display:flex;
 align-items:center;
}
img {
  border: 1px solid black;
  float: left;
  margin: 1em;
}
<div class="spanclass" style="width:500px;">
  <ul class="ulclass" style="list-style: none outside;">
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum </a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem</a>
    </li>
    <li class="liclass">
      <a href="#"><img src="https://i.imgur.com/oQaIpMK.jpeg">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</a>
    </li>
  </ul>
</div>