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

テキストを水平方向に中央揃えできtext-align:center;ますが、垂直方向に揃えるには、次の2行をdivに追加する必要があります

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