twitter-bootstrap – Jumbotron对齐问题

发布时间：2020-12-18 00:27:39 所属栏目：安全来源：网络整理

导读：我目前正在使用最新版本的bootstrap 3.0.0 问题很简单.在jumbotron容器中,我使用如何将文本与徽标对齐我已经玩了几个小时,有col-md- *而且运气不好. 在bootstrap 2.3.2中,我通过使用.text-center和.pagination center(图像?? – 它工作)实现了将所有内容集

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

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

我已经玩了几个小时,有col-md- *而且运气不好.

在bootstrap 2.3.2中,我通过使用.text-center和.pagination center(图像?? – 它工作)实现了将所有内容集中在英雄中的效果

http://jsfiddle.net/zMSua/

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

解决方法

这是另一个答案,可以将实际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>

检查我添加的类.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!