Как мой <figcaption>оказался на стороне моего изображения, и как я могу заставить его вернуться к нижней части? - PullRequest
Новая
       55

Как мой <figcaption>оказался на стороне моего изображения, и как я могу заставить его вернуться к нижней части?

0 голосов
/ 03 апреля 2019

Я пытаюсь создать изображение по центру, с надписью сразу под ним - но либо я получаю подпись внизу, и изображение перемещается полностью влево, либо заголовок будет располагаться только справаизображения, как показано здесь.Как заставить этот заголовок переместиться ниже, не теряя центрирование изображения (или заголовок над ним)?

Я уже пытался добавить столбец flex-flow: в идентификатор let_go, который перемещалсяподпись к собственной строке - но отправил изображение обратно на левую сторону.

HTML 

<main>
      <h3 class="outline">Stuck in a DMV slump? Answer a few short questions, and we'll help you find the best path to
        becoming street-legal on two wheels.</h3>
      <figure id="lets_go">
          <img class="outline" src="./images/logo_icon_only_transparent_background.png"></img>
          <figcaption class="caption_style2 outline">Let's Go!</figcaption>
      </figure>
    </main>

main {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-family: Merriweather;
}

h3 {
  display: flex;
  text-align: center;
  height: 100%;
  width: 75%;
  flex-direction: row;
  font-family: Merriweather;
}

main figure img {
  display: flex;
  text-align: center;
  align-content: center;
  justify-content: center;
  height: 100%;
  width: 15%;
  flex-flow: column;
}

#lets_go {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
 }

.caption_style2 {
  font-size: 100%;
  text-align: center;
  margin: 0px;
}
...