Как мне отобразить текст под картинкой?

103

28 декабря 2020, 13:40

Вот что хочу сделать: три или более картинок с текстом под ними, которые будут выравниваться по горизонтали(в данном случае использую flex). Но я так понимаю, что тег

начинает тоже выравниваться, так как без flex'a текст распологается под картинкой.

Как мне сделать, чтобы картинки выровнились по горизонтали с текстом под ними? Ограничиваю эти блоки border'oм, и желательно чтобы были отступы от краёв сайта(margin-left/right/top).

Answer 1

Проблема в том что вы даете общему div'у свойства. То есть, свойства которые вы задали блоку div будут применяться для всех div'ов на странице. Сделайте обертку (wrapper). Примерно вот так

.wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
.wrapper .left, .wrapper .center, .wrapper .right { 
    border: 1px solid red; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Form registration on JavaScript</title> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href=""> 
</head> 
<body> 
  <div class="wrapper"> 
      <div class="left"> 
          <img src="" alt="Left image"> 
      </div> 
      <div class="center"> 
          <img src="" alt="Center image"> 
      </div> 
      <div class="right"> 
          <img src="" alt="Right image"> 
      </div> 
  </div> 
 </body> 
</html>

Не забудьте вставить свой текст:) P.S. В следующий раз для удобства кидайте фрагмент кода, а не картинку XD