Question

我目前正在使用最新版本的bootstrap 3.0.0

问题很简单。在jumbotron容器中，我使用如何将文本与徽标对齐

我已经玩了几个小时，用col-md- *并且运气不佳。

在bootstrap 2.3.2中，我通过使用.text-center和.pagination center实现了将所有内容集中在英雄中的效果（对于图像?? - 它有效）

http://jsfiddle.net/zMSua/

这个小提琴显示了我试图以bootstrap 3.0.0为中心的文本和图像

Answer 1

为什么不抵消网格？

像这样：

<div class="jumbotron">
      <div class="container">
        <div class="row well well-lg">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="">Home of the</h1>
                <div class="">
                    <img src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" />
                </div>
                <h2 class="">"All In", Fun!</h2>
            </div>
        </div>
      </div>

bootstrap有一个12列的网格，如果你的主列有6个，你可以将它偏移3并留给你：

3列6（主容器）和3列

Answer 2

这是另一个答案，可以将实际div中的一些内容集中在一起：

  <head>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

        <style>
            .centerfy img{
                margin: 0 auto;
            }
            .centerfy{
                text-align: center;
            }

        </style>
    </head>
    <body style=" padding: 10px;">
    <div class="jumbotron">
      <div class="container">
        <div class="row well well-lg">
            <div class="col-md-6 col-md-offset-3 centerfy">

                <h1 class="">Home of the</h1>
                <div class="">
                    <img  src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" />
                </div>
                <h2 class="">"All In", Fun!</h2>
            </div>
        </div>
      </div>
    </body>

检查我添加的课程。

Answer 3

从Bootstrap 3.3.6开始，我在Jumbotron中集中文本和徽标的经验只需将.text-center添加到.container类元素中，同时将.img-responsive和.center-block添加到图像元素中。我发现不需要修改CSS类或偏移引导区域。

查看my demo。

  <div class="jumbotron">
            <div class="container text-center"> 
            <h1>Hello World</h1>
            <img src="http://klpgo.com/klpfiles/images/klpgov3.png" alt="img" class="img-responsive center-block">
            <p>custom text within my jumbotron</p>
            <a class="btn btn-default">first button</a>
            <a class="btn btn-info">second button</a>
            </div>
        </div>

Jumbotron对齐问题

3 个答案: