bootstrap 栅栏剧中_在 Bootstrap 的栅格系统中如何将文字垂直居中？

最新推荐文章于 2023-09-02 10:28:19 发布

海v尔v前v员工

最新推荐文章于 2023-09-02 10:28:19 发布

阅读量1.2k

点赞数

文章标签： bootstrap 栅栏剧中

本文链接：https://blog.csdn.net/weixin_29526767/article/details/112026700

版权

代码：

......

</div>

</div>

......

尝试用过了

vertical-align: middle

，但不管是加在

上还是

<p>

上都没有用。

也在 Segmentfault 上和其他地方找过了一些方法，但都有些问题。

于是尝试用 jQuery 与 CSS：

$(document).ready(function() {

$(window).resize(function() {

$('.inner').css({

margin-left: ($(window).width() - $('.inner').outerWidth()) / 2,

margin-top: ($(window).height() - $('.inner').outerHeight()) / 2

});

$(window).resize();

});

.inner {

position: absolute;

left: 50%;

top: 50%;

}

.outer {

position: relative;

}

结果虽然文字垂直居中了，但是又出现了新的问题：

整个页面右边出现了一条白边，用开发者工具看的时候发现这条白边在

<html>

外面(？)

请问如何才能在不影响页面布局等的情况下将栅格中的文字垂直居中？非常感谢。

首先声明，这个方案不能在 IE 6/7 下工作，其他浏览器理论上都可以正常工作，所以可能并不是题主需要的完美方案。

不能居中的罪魁祸首是

col-sm-*

的

float: left

样式，因为对于

col-sm-*

而言，只要屏幕宽度不小于

@screen-sm-min

就不会折行，所以可以考虑不使用

float: left

而是用

display: table-cell

来实现对齐，这样就能比较好的解决居中问题了。不过问题是不支持这种

display

的浏览器就会出问题，你可以考虑用 CSS hack 来 fallback，舍弃居中对齐来保持栅格系统正常工作。

HTML：

</div>

</div>

LESS：

@media (min-width: @screen-sm-min) {

.vertical-middle-sm {

display: table;

> div {

display: table-cell;

height: 100%;

min-height: 100%;

float: none !important;

}

<div class="inner">比较满意比较满意比较满意</div><div class="v">cssHack</div>

</div>

* {

margin: 0;

padding: 0;

}

.cont {

background-color: #ccc;

font-size: 24px;

height: 150px;

text-align: center;

overflow: hidden;

width: 280px;

}

.cont .inner,

.cont .v {

display: inline-block;

zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */

}

.cont .inner {

line-height: 1.8;

padding: 0 4px 0 5px;

vertical-align: middle;

width: 262px;

}

.cont .v {

line-height: 150px;

text-indent:-9999px;

width: 1px;

}

海v尔v前v员工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 栅栏剧中_在 Bootstrap 的栅格系统中如何将文字垂直居中？

代码：......<div class="row text-center outer"><div class="col-sm-4"><img src="photo.jpg" alt="..." class="img-circle"></div><div class="col-sm-8 text-left inner"><p>测...
复制链接

扫一扫