Как разместить мой текст справа и слева от изображения до вертикального центра?

Question

Я должен поместить текст слева и справа от моего изображения до вертикального центра.Но похоже, что мои контейнеры не знали бы, какой высоты они имеют.

Как я могу это исправить?

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
  display: table;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<footer class="footer">
  <div class="container" style="display: table-cell; vertical-align: bottom">
    <div class="row">
      <div class="col-md-4 vert">
        <p>
          Text 1
        </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" style="height: 60px" />
      </div>
      <div class="col-md-4 text-right">
        Text 2
      </div>
    </div>
  </div>
</footer>

Answer 1

вы можете использовать

align-items: center; 

, это будет центрировать ваш контент по вертикали.

Answer 2

Если ваш нижний колонтитул 60px, добавьте line-height:60px, например:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
  display: table;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  
}

.vert {
  line-height:60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<footer class="footer">
  <div class="container" style="display: table-cell; vertical-align: bottom">
    <div class="row">
      <div class="col-md-4 vert">
        <p>
          Text 1
        </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" style="height: 60px" />
      </div>
      <div class="col-md-4 text-right vert">
        Text 2
      </div>
    </div>
  </div>
</footer>

Answer 3

Просто добавьте align-items: center;к вашему .row и удалите тег p из первого .col-md-4 или добавьте его ко второму.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
  display: table;
}

.row {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<footer class="footer">
  <div class="container" style="display: table-cell; vertical-align: bottom">
    <div class="row">
      <div class="col-md-4 vert">
        <p>
          Text 1
        </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" style="height: 60px" />
      </div>
      <div class="col-md-4 text-right">
        Text 2
      </div>
    </div>
  </div>
</footer>