начальное выравнивание текста по 4 кнопкам

Question

Это не должно быть сложно, но это сводит меня с ума: у меня есть простая кнопка (для целей тестирования), которая выглядит так:

.btn-test {
  height: 100px;
}

<button class="btn btn-test">
  <span>This is a test</span>
</button>

Если вы используете загрузчик и запускаете этот биткод, вы увидите это:

https://codepen.io/r3plica/pen/MPbryQ

Как видите, текст «Это тест» выровнен по вертикали.Я посмотрел на CSS для кнопки, и я не вижу, где это установлено.Я предполагаю, что это как-то связано с flexbox.Я попытался добавить align-items-start к классам кнопок, но ничего не изменилось.

Неужели кто-то знает, как легко выровнять текст сверху или снизу?

Answer 1

Вы можете использовать свойство CSS line-height.Измените на любое значение (высоту), которое вы хотите.

.btn-test {
  height: 100px;
  line-height: 150px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-test btn-primary">
  <span>This is a test</span>
</button>

Answer 2

вам нужно добавить .d-flex в кнопке, после этого вы можете применить другие классы позиционирования, такие как .align-self-start, .align-self-end, .align-self-baseline и т. Д., К размеру текста.*

и даже если вы не примените .align-self-start, он будет по умолчанию расположен сверху.

<button class="btn btn-test d-flex">
    <span class="align-self-start">This is a test</span>
</button>

это должно работать для вас.

Answer 3

Я не думаю, что кнопки в начальной загрузке - это флекс-боксы.В любом случае, я попробовал это, и это помещает текст в верхней части кнопки:

<button class="btn btn-test d-flex align-items-start">
  <span>This is a test</span>
</button>