时间戳

首页 > 解决方案 > 如何将我的文本从图像的右侧和左侧放置到垂直中心？

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

问题描述

我必须将文本从图像的左侧和右侧放置到垂直中心。但似乎我的容器不知道它们的高度。

我怎样才能解决这个问题？

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

标签： csshtml

解决方案

只需添加 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>

推荐阅读