我如何能中心水平或垂直与推特引导元素?

是否有任何方法在主父元素中垂直或水平地居中html元素?

当前回答

如果你试图在div中居中一个图像，但图像不会居中，这可能描述了你的问题:

JSFiddle演示的问题

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsive类向图像标记添加了一个display:block指令，它将停止text-align:center(文本中心类)的工作。

解决方案:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

解决方案的JSFiddle演示

添加center-block类将覆盖使用img-responsive类放入的display:block指令。如果没有img-responsive类，图像将仅通过添加文本中心类居中

此外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap 4现在本机使用它。

这是布拉德·希夫制作的一个优秀的、快节奏的视频教程

这里有一个很棒的小抄

2016-01-01 22:17:04

其他回答

为bootstrap4垂直中心的少数项目

D-flex用于伸缩规则

用于项目垂直方向的弯曲列

Align-items-center用于水平定心

垂直居中的justification -content-center

Style ='height: 300px;'必须为设定点，其中中心为calc或使用h-100类

2019-05-29 10:48:22

在Bootstrap 4中，你可以使用基于flex的HTML类d-flex、justify-content-center和align-items-center:

来源:Bootstrap 4.1

2018-07-12 13:14:49

Bootstrap文档:

设置要显示的元素:块和居中通过边距。可作为mixin和类使用。

<div class="center-block">...</div>

2014-04-22 21:47:55

我用这个

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

2013-06-19 21:16:38

我喜欢类似问题的答案:

在实际的表data <td>和表头<th>元素上使用bootstrap的文本中心类。所以 <td class="text-center">单元格数据</td> and <th class="text-center">头单元格数据</th>

2015-06-18 12:56:20

我如何能中心水平或垂直与推特引导元素?

推荐文章

最新文章

标签