Bootstrap网格 - 中心块不在中心定位元素 - 为什么?

时间:2017-12-22 19:31:28

标签: css twitter-bootstrap-3

我有一个问题。我有一个带2列的bootstrap(3)网格。深入了解我正在使用的正确列' center-block'将元素定位在中心。出于某种原因,它什么都不做。我究竟做错了什么?谢谢!

https://jsfiddle.net/codingcodingcoding/mbw45xdh/1/

<section id="contact">
    <div class="container-fluid">
        <h2 class="section-heading text-center">Let's Get In Touch!</h2>
        <div class="row">
            <div class="col-md-6">
                <div id="googleMap"></div>
            </div>
            <div class="col-md-6">
                <div class="center-block">
                   <span class="glyphicon glyphicon-earphone phone-icon"></span>
                    <span class="glyphicon glyphicon-envelope email-icon"></span>
                    <p>
                        <a href="mailto:your-email@your-domain.com">feedback@example.com</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

1 个答案:

答案 0 :(得分:0)

您必须在div元素

中使用text-center

像:

<section id="contact">
   <div class="container-fluid">
       <div class="text-center">
          <h2 class="section-heading">Let's Get In Touch!</h2>
       </div>
       <div class="row">
          <div class="col-md-6">
            <div id="googleMap"></div>
          </div>
          <div class="col-md-6">
            <div class="center-block">
               <span class="glyphicon glyphicon-earphone phone-icon"></span>
                <span class="glyphicon glyphicon-envelope email-icon">
                </span>
                <p>
                    <a href="mailto:your-email@your-
                    domain.com">feedback@example.com</a>
                </p>
             </div>
          </div>
       </div>
    </div>
</section>