Блог

У меня есть DIV со значком с левой стороны и текстом с правой стороны. Текст является динамическим и может быть коротким или длинным. Если текст короткий (строка или две) Я хочу, чтобы он был центрирован по значку. Если это долго, я хочу, чтобы они были выровнены по вертикали по верхнему краю. Есть ли способ сделать это только с помощью CSS (без подсчета строк)?

  <div class="container" >
          <div class="container__left">
            <div class="container__left__icon" />
          </div>
          <div class="container__right">
            // some react code with dynamic text in <div>s and <span>s
          </div>
 </div>
  

Вы можете использовать display: table-cell и другие вертикальные выравнивания — верхнее для первой ячейки и среднее для второй.

 .inner1{
display:table-cell;
vertical-align:top;
}
.inner2{
display:table-cell;
vertical-align:middle;
}  

 <div>
 <div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
 <div class="inner2">some text some text some text some text some text some text some text some  </div>
</div>

<div>
 <div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
 <div class="inner2">some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some  some text some text some text some text some text some text some text some  some text some text some text some text some text some text some text some  some text some text some text some text some text some text some text some  some text some text some text some text some text some text some text some  some text some text some text some text some text some text some text some  </div>
</div>  

 .container {
display: flex;
flex-direction: row;
align-items: center;
}
  

Вы можете использовать Flex Box CSS, чтобы сделать это очень легко. Вы применяете flex к родительскому div, устанавливаете направление, в котором вы хотите, чтобы поля заполняли пространство (по вертикали или по горизонтали — в данном случае по горизонтали, поэтому мы хотим добавить «направление строки»), и, наконец, центрируете эти элементы по вертикали, используя align-items, для которого установлено значение center . Это будет учитывать любые изменения в содержимом в вашем правом окне. Позже это также упрощает адаптивность.