<figcaption> слева от <img>и оба выровнены по вертикали - PullRequest
Новая
       70

<figcaption> слева от <img>и оба выровнены по вертикали

0 голосов
/ 02 декабря 2018

Я пытаюсь сделать простую подпись слева от моего <img> и выровнять их по вертикали (т. Е. Текст выравнивается по центру изображения справа). 

<figure><img style="float:right" alt="qrcode_vcard" src="/assets/pic.png" />
 <figcaption>My caption goes here. How do I make it aligned to the middle rather than the top.</figcaption>
</figure>

IМожно перемещать изображение вправо, но заголовок выравнивается по верху.Я хочу выровнять его по центру.Я также хотел бы сохранить теги <figure> и <figcaption>.

1 Ответ

0 голосов
/ 02 декабря 2018

Существует два простых варианта использования CSS Grid или CSS flexbox.

С flexbox: 

figure {
  /* forcing the use of CSS flexbox for layout: */
  display: flex;
  /* reversing the direction of the contents, to ensure
     the image is placed to the right (in left-to-right)
     locales, but to the left in right-to-left locales): */
  flex-direction: row-reverse;
  /* aligning the items to the center of the flow-axis
     (the direction of the contents): */
  align-items: center;
}
<figure><img alt="qrcode_vcard" src="https://fillmurray.com/200/200" />
  <figcaption>My caption goes here. How do I make it aligned to the middle rather than the top.</figcaption>
</figure>

Или с помощью CSS Grid: 

figure {
  /* forcing the use of CSS grid for layout: */
  display: grid;
  /* specifying that contents should be placed
     in columns rather than rows: */
  grid-auto-flow: column;
  /* setting the text direction to right-to-left flow: */
  direction: rtl;
  /* aligning the contents to the centre of the flow-axis: */
  align-items: center;
  /* defining a 10px gutter between grid-items: */
  grid-gap: 10px;
}
<figure><img alt="qrcode_vcard" src="https://fillmurray.com/200/200" />
  <figcaption>My caption goes here. How do I make it aligned to the middle rather than the top.</figcaption>
</figure>

Демонстрации JS Fiddle .

Ссылки:

...