css - 如何将我的文字放在图像的右侧和左侧到垂直中心？

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

如果您的页脚是 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>