Question

我正在尝试将文本放在DIV中，不仅仅是水平而是垂直 - 我已经玩了很长时间的CSS并且似乎无法让它工作 -

h6 {
    font-size: 32px;
    color: #FFFFFF;
}

h6:hover {
    color: #000000;
}

.griditem {
    position: relative;
    display:inline-block;
    margin-right: 17px;
    margin-bottom: 17px;
    background-color: #777;
    width: 32%;
    height: 500px;
    max-width: 612px;
    min-width: 389px;
    text-align: left;
}

.titles {
    padding: 0px;
    bottom: 0px;
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    text-align: center;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    vertical-align: middle;
}

.griditem:hover > .titles {
    display:  block;

}



<a class="griditem" href="http://www.bbc.co.uk" style="background-image:url('http://news.bbcimg.co.uk/media/images/64623000/jpg/_64623471_clinton_pa.jpg'); background-size:100% 100%;\">
<div class="titles">
<h5>Title</h5><h6>Subtitle</h6>
</div></a>

有谁可以告诉我哪里出错了？

基本上我想要'标题'＆amp;翻转时，“字幕”位于“.griditem”框的中心。我确信这很简单，但我一直盯着这看，现在我忽略了明显的......任何帮助都会非常感激！

谢谢！

Answer 1

您可以使用text-align:center;水平居中文字，但要垂直对齐，您需要将下两行添加到div

display:table-cell;
vertical-align:middle;

在DIV中居中文本

1 个答案: