Как сделать картинка на одном уровне?

Question

CSS:

.dish_1 {
    text-align: left;
}

.dish_2 {
    text-align: center;
}

.dish_3 {
    text-align: right;
}

HTML:

<div class="dish_all">
            <div class="dish_1">
            <img src="images/dish_1.png">
            <br>
            <a>КТО</a>
            </br>
            </div>
            <div class="dish_2">
            <img src="images/dish_2.png">
            <br>
            <a>КТО</a>
            </br>
            </div>
            <div class="dish_3">
            <img src="images/dish_3.png">
            <br>
            <a>КТО</a>
            </br>
            </div>
    </div>

Результат:

Answer 1

display: flex:

.dish_all {
  display: flex;
  justify-content: space-between;
}

<div class="dish_all">
  <div class="dish_1">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_2">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_3">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
</div>

float: left:

.dish_all>div {
  float: left;
  margin: 0 10px;
}

<div class="dish_all">
  <div class="dish_1">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_2">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_3">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
</div>

display: inline-block:

.dish_all > div {
  display: inline-block;
  margin: 0 10px;
  text-align: left;
}

.dish_all {
  text-align: center;
}

<div class="dish_all">
  <div class="dish_1">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div><!--
  --><div class="dish_2">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div><!--
  --><div class="dish_3">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
</div>

Answer 2

.dish_all {
  display: flex;
  justify-content: space-between;
}

БЛОГ НА HUSL

Как сделать картинка на одном уровне?

Ответы (2 шт):