垂直居中图像和文本 bootstrap 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 种不同的解决方案来解决 'centering vertically' 问题并且 none 似乎有效。

目前的情况：

外观应该如何（忽略颜色等）

Answer 1

这里是 JS Fiddle:

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

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

对于段落文本，我使用了一个非常标准的垂直对齐技巧——将父级设置为 position: relative;，然后使用绝对定位和 CSS 二维变换使元素居中，这适用于除 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

简单使用显示：内联块；而不是浮动在图像和段落中。

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

垂直居中图像和文本 bootstrap 3

centre image and text vertically bootstrap 3

html

css

twitter-bootstrap-3