logo标签列表

Jumbotron对齐问题

twitter-bootstraptwitter-bootstrap-3
6

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

问题很简单。在我使用的jumbotron容器中，我如何使文本与标志居中对齐？

我已经尝试了几个小时，使用col-md-*，但运气不佳。

在bootstrap 2.3.2中，我通过使用.text-center和.pagination center（用于图片？ - 它起作用了）来实现将所有内容居中对齐。

http://jsfiddle.net/zMSua/

这个fiddle演示了我正在尝试在bootstrap 3.0.0中居中对齐的文本和图像。

3个回答
8
为什么不对齐网格？像这样：

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

5
这里是另一个答案，可以将一些内容居中在实际的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>

请查看我添加的类。

感谢Rodrigo - 这个修复方法类似于我使用的那个。Bootstrap的类.text-center可以调整文本居中，但是他们没有内置的用于图片居中的类... 可能需要采用网格哈克或类似的东西。我不明白为什么他们不在CSS样式中加入一个类.img-center（也许是因为这是一个hack）?? - scriptmonkey
2
从Bootstrap 3.3.6开始，在Jumbotron中居中文本和Logo的方法是在.container类元素中添加.text-center，以及在图像元素中添加.img-responsive和.center-block。我发现没有必要修改CSS类或偏移Bootstrap区域。
请查看我的演示。
  <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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接