Question

我的h3问题没有垂直居中。在萤火虫中，如果我改变顶部：50％到顶部：51％然后再回来，它会修复自己。

div中的H3需要垂直居中。

link：here

的CSS：

.review-large {
    text-align: center;
    clear: both;
    margin-top: 20px;
    margin-bottom: 50px;
    position: relative;
    width: 100%;
    min-height:127px;
    background-image: url(../images/review-images/quote-left.jpg), url(../images/review-images/quote-right.jpg);
    background-position: left center, right center;
    background-repeat: no-repeat;
    text-align:center;
}

.review-large h3 {
    color: #00adee;
    font-size: 33px;
    font-weight: bold;
    line-height: 33px;
    padding:0 60px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin:0;
}

Answer 1

您应该使用表/表格单元格行为。将容器放在display：table;和桌子上的h3;并设置垂直对齐：中间。同时删除位置变换和顶部，如：

.review-large {
    display: table;
    text-align: center;
    clear: both;
    margin-top: 20px;
    margin-bottom: 50px;
    position: relative;
    width: 100%;
    min-height:127px;
    background-image: url(../images/review-images/quote-left.jpg), url(../images/review-images/quote-right.jpg);
    background-position: left center, right center;
    background-repeat: no-repeat;
    text-align:center;
}

.review-large h3 {
    display: table-cell;
    vertical-align: middle;
    color: #00adee;
    font-size: 33px;
    font-weight: bold;
    line-height: 33px;
    padding:0 60px;
    position: relative;
    margin:0;
}

Answer 2

.review-large{
display: table;
height: 127px;
}
.review-large h3{
display: table-cell;
    vertical-align: middle;
}

添加显示表属性并将最小高度更改为高度，不用担心固定高度，表属性本身是灵活的。

并从h3中删除transform和top以及其他未使用的属性。

Answer 3

h3 { 颜色：＃00adee;

显示：阻止;

font-size: 33px;
font-weight: bold;

行高：127px;

padding: 0 60px;
vertical-align: middle;

}

div包含的H3不能垂直居中

3 个答案:

div包含的H3不能垂​​直居中

3 个答案:

div包含的H3不能垂直居中