将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。我还会删除一些CSS样式的wrapcontrols和wrap divs。

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