Как выровнять заголовок с изображением (проблема с высотой строки) - PullRequest
Новая
       7

Как выровнять заголовок с изображением (проблема с высотой строки)

0 голосов
/ 31 мая 2018

У меня есть макет с двумя столбцами, где в левом столбце находится заголовок, в правом столбце - изображение.Я хочу, чтобы заголовок и изображение были выровнены сверху, как показано ниже:

enter image description here

Теперь я достиг этого, установив h1 { line-height: 1em; }.Тем не менее, я также хочу, чтобы это работало, если высота строки больше, и заголовок переносится на большее количество строк, как в этом примере кода: 

body {
max-width: 400px;
}

div {
  float: left;
  width: 50%;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 100%;
}
<div>
  <h1>Hello world!
  <br>Foo Bar Baz</h1>
</div>
<div>
  <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>

Я не хочу работать с отрицательными полями, потому что левый столбец будет заполнен содержимым CMS позже.Я не могу контролировать, какой элемент (h1-h6, p и т. Д.) Будет там показываться и какая высота строки у этого элемента.

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Вы всегда можете использовать старое доброе vertical-align свойство.Хотя это всегда было сложное свойство.
В вашем случае, например, мне нужно было сделать оба divs display свойство inline-block, так как вам нужно, чтобы элементы были встроенными, чтобы вы могли выровнять их по вертикали.
Также япришлось поместить закрывающий тег в один div рядом с открытием следующего, потому что отображение их inline отобразило бы новую строку в коде как пробел и, таким образом, заставило бы второй div упасть на новую строку.

body {
max-width: 400px;
}

div {
  width: 50%;
  display:inline-block;
  vertical-align:middle;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 100%;
}
    <div >
      <h1>Hello world!
      <br>Foo Bar Baz</h1>
    </div><div class="leDiv">
      <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
    </div>
0 голосов
/ 31 мая 2018

Это идеальное время для использования макета flexbox в CSS.

С flexbox очень легко выровнять контент без необходимости устанавливать какие-либо конкретные высоты - так как вы можете позволить элементам быть одинаковымивысота как их братья и сестры.

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

body {
max-width: 400px;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 50%;
}
.flex-container {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
<div class="flex-container">
  <h1>Hello world!
  <br>Foo Bar Baz</h1>
  <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
<hr>
<div class="flex-container">
  <h2>Hello world!
  <br>Foo Bar Baz Longer example with h2</h2>
  <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>

Для получения дополнительной информации о посещении flexbox: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

...