如何使用Bootstrap将<div>与<img/>以及另一个<div>与<p>垂直对齐

Question

我从Bootstrap开始，我对此感到困惑。我试图在小型设备上查看此类内容：

我在下面的片段中看到了这种情况，但是当线条突然变成新线条时，它就变得一团糟。 我真的迷失了。

＆＃13;

＆＃13;

.caracteristicas .icon {
  height: 4.5em;
}
.caracteristicas img {
  float: right;
}
.caracteristicas p {
  top: 1.3em;
  margin-left: -1.7em;
  position: relative;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div></div>
  <div></div>
  <div class="row caracteristicas">
    <div class="col-xs-3 icon">
      <img src="http://i.imgur.com/U82ns0j.png" />
    </div>
    <div class="col-xs-9">
      <p>Transporte gratis a domicilio</p>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-3 icon">
      <img src="http://i.imgur.com/Cfizryh.png" />
    </div>
    <div class="col-xs-9">
      <p>A precio de supermercado</p>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-3 icon">
      <img src="http://i.imgur.com/nbEsvya.png" />
    </div>
    <div class="col-xs-9">
      <p>Agua fría o caliente con solo pulsar un botón</p>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-3 icon">
      <img src="http://i.imgur.com/RgihWPe.png" />
    </div>
    <div class="col-xs-9">
      <p>Ideal para preparar alimentos infantiles</p>
    </div>

    <div class="clearfix"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我尝试了表格单元格显示类型。您可以根据需要调整尺寸。它还垂直居中左侧的图像。我希望它能满足您的需求。查看下面的代码段：

＆＃13;

＆＃13;

.caracteristicas .icon, .caracteristicas .desc p{
  height: 4.5em;
  display: table-cell;
  vertical-align: middle;
}
.block { 
  display: table;
}

.caracteristicas .icon {
  min-width: 8em;
  float: none;
}

.caracteristicas .desc {
  padding-left: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row caracteristicas">

    <div class="col-xs-12 block">
      <div class="col-xs-3 icon text-right">
        <img src="http://i.imgur.com/U82ns0j.png" />
      </div>
      <div class="col-xs-9 desc">
        <p>Transporte gratis a domicilio</p>
      </div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-3 icon  text-right">
        <img src="http://i.imgur.com/Cfizryh.png" />
      </div>
      <div class="col-xs-9 desc">
        <p>A precio de supermercado</p>
      </div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-3 icon text-right">
        <img src="http://i.imgur.com/nbEsvya.png" />
      </div>
      <div class="col-xs-9 desc">
        <p>Agua fría o caliente con solo pulsar un botón</p>
      </div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-3 icon text-right">
        <img src="http://i.imgur.com/RgihWPe.png" />
      </div>
      <div class="col-xs-9 desc">
        <p>Ideal para preparar alimentos infantiles</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;