如何将文字从图像的右侧和左侧放到垂直中心？

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>

Answer 2

只需添加align-items：center;到你的.row并从第一个.col-md-4中删除p标签或将其添加到第二个。

.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>

Answer 3

您可以使用

align-items: center; 

这将使您的内容垂直居中。