css - Bootstrap 网格 - center-block 不将元素定位在中心 - 为什么?

标签 css twitter-bootstrap-3

我有一个问题。我有一个包含 2 列的 bootstrap (3) 网格。深入了解我正在使用“中心 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>

最佳答案

你必须在 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>

关于css - Bootstrap 网格 - center-block 不将元素定位在中心 - 为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47946490/

相关文章:

html - CSS 星级评分分离

css - 我可以使用 Homestead sitebuilder 为我的网站编写绝对定位元素吗?

javascript - 使用延迟加载会让我的网页显示得更快吗

jquery - Bootstrap 弹出框边框 CSS

twitter-bootstrap-3 - Bootstrap 不同的输入尺寸不同的屏幕尺寸

angularjs - 使用响应式设计框架创建隐藏移动设备上的详细 View 的主细节模式

html - 如何在 Bootstrap 导航选项卡之间有分隔符/分隔符

css - 在 Eclipse 中抑制 JavaFX CSS 错误?

containers - float :left & float:right divs 之间的 CSS 自动调整容器

javascript - 如何在 javascript 中使用手动点击元素符号创建自动幻灯片?