Jumbotron对齐问题

Question

Jumbotron对齐问题

scr*_*key 6 twitter-bootstrap twitter-bootstrap-3

我目前正在使用最新版本的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

Rod*_*rek 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>

Run Code Online (Sandbox Code Playgroud)

bootstrap有一个12列网格,如果你的主列有6,你可以将它偏移3并留下你:

3列6(主容器)和3列

Answer 2

Rod*_*rek 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>

Run Code Online (Sandbox Code Playgroud)

检查我添加的类.

归档时间：	12 年，4 月前
查看次数：	22760 次
最近记录：	9 年，10 月前