0

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

我的代码在这里：http: //jsfiddle.net/K2sys/46/

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>

​</p>

谁能告诉我哪里出错了？

基本上我希望“标题”和“副标题”在翻转时位于“.griditem”框的中心。我敢肯定这真的很简单，但是我一直盯着这个看太久了，现在我忽略了显而易见的......任何帮助将不胜感激！

谢谢！

4

1 回答 1

2

you can center text horizontally with text-align:center; but to align it vertically you need to add the next 2 lines to the div

display:table-cell;
vertical-align:middle;
于 2012-12-11T10:19:10.053 回答