html - 将 DIV 连续对齐 Bootstrap - 文本以图像为中心

Question

( Bootstrap 3 和 Laravel 5.1 框架)

我在 Boostrap 行中有 3 个 div。每个 div 都有一个图像和一些以该图像为中心的文本。我希望所有三个 DIV 并排(在行中垂直居中)，但我似乎无法实现。我搜索了很多帖子，但大多数都是简单的解决方案，无法解决我的复杂问题。

HTML

<div class="container">
<div class="row"> <!--Timer and scoring of match -->
  <div class="wrapcontrols" style="float: left">
    <img src="/img/leftminus.png">
    <img src="/img/blackscore.png">
    <img src="/img/rightplus.png">
    <h2 class="clocktime">5</h2>
  </div>
  <div class="wrap">
    <img src="/img/clockbackground.png">
    <h2 class="clocktime">03:00</h2>
  </div>
  <div class="wrapcontrols" style="float: right">
    <img src="/img/leftminus.png">
    <img src="/img/yellowscore.png">
    <img src="/img/rightplus.png">
    <h2 class="clocktime">5</h2>
  </div>
</div>

CSS

.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }

.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px;  }

.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative;  }

Here is what it looks like currently

Answer 1

在这里，我添加了 Bootstrap 所需的适当类。我还删除了您的内联 CSS。我还会为 wrapcontrols 和 wrap div 删除一些 CSS 样式。

<div class="container">

    <div class="row"> <!--Timer and scoring of match -->

      <div class="wrapcontrols col-sm-4">
        <img src="/img/leftminus.png">
        <img src="/img/blackscore.png">
        <img src="/img/rightplus.png">
        <h2 class="clocktime">5</h2>
      </div>

      <div class="wrap col-sm-4">
        <img src="/img/clockbackground.png">
        <h2 class="clocktime">03:00</h2>
      </div>

      <div class="wrapcontrols col-sm-4">
        <img src="/img/leftminus.png">
        <img src="/img/yellowscore.png">
        <img src="/img/rightplus.png">
        <h2 class="clocktime">5</h2>
      </div>

</div>

这是正确的 Bootstrap 结构:

<div class="row">

    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>

</div><!--end row-->