中心图像和文本垂直引导3

Question

我有以下bootstrap 3代码：

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="phone-and-email">
                <p>+44 (0)7950 123 456 info@example.co.uk</p>
            </div>
        </div>
        <div class="col-md-10">
            <div class="icons">
                <div class="row">
                    <div class="col-md-4">
                        <img src="images/info.png" class="pull-left"/>
                        <p>How to buy</p>
                    </div>
                    <div class="col-md-4">
                        <img src="images/delivery.png" class="pull-left"/>
                        <p>Free Delivery</p>
                    </div>
                    <div class="col-md-4">
                        <img src="images/gift.png" class="pull-left"/>
                         <p>Gift Vouchers</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

和css：

.phone-and-email, .icons {
    border-top: 2px black solid;
    border-bottom: 2px black solid;
    height: 50px;
}

我正在尝试使图标和文字都居中，但它不起作用。 我已经尝试了5种不同的解决方案来解决“垂直居中”问题，但似乎都没有。

目前看起来如何：

应该如何看待（忽略颜色等）

Answer 1

这是JS Fiddle：

对于图像，我明确设置了图像高度并计算了使图像居中所需的边距，因为您的条形图明确设置为50px高度：

img {
    height: 30px;
    width: 30px;
    margin: 8px 10px 10px; /* Top margin offset for 2px top border */
}

对于段落文本，我使用了一个非常标准的垂直对齐技巧 - 将父级设置为position: relative;，然后使用绝对定位和CSS 2D变换使元素居中，这适用于除IE8之外的所有主要浏览器：

/* Utility class added to each parent div */
.pos-rel {
    position: relative;
}

/* Vertically center child p elements */ 
.icons p, .phone-and-email p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Answer 2

简单使用显示：内联块;而不是Float留在图像和段落。

.phone-and-email,
.icons {
  border-top: 2px black solid;
  border-bottom: 2px black solid;
  height: 50px;
}

.test_class > div{
  margin: 8px 0;
  text-align: center;
}

.test_class > div > img {
    display: inline-block;
    height: 30px;
    width: 30px;
}
.test_class > div > p {
    display: inline-block;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="phone-and-email">
        <p>+44 (0)7950 123 456 info@example.co.uk</p>
      </div>
    </div>
    <div class="col-md-10">
      <div class="icons">
        <div class="row test_class">
          <div class="col-md-4">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Info_Simple_bw.svg/2000px-Info_Simple_bw.svg.png" />
            <p>How to buy</p>
          </div>
          <div class="col-md-4">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Info_Simple_bw.svg/2000px-Info_Simple_bw.svg.png"  />
            <p>Free Delivery</p>
          </div>
          <div class="col-md-4">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Info_Simple_bw.svg/2000px-Info_Simple_bw.svg.png" />
            <p>Gift Vouchers</p>
          </div>
        </div>
      </div>
    </div>
  </div>