Question

I’m trying to center text within a DIV, not just horizontally but vertically too – I’ve played around with the CSS for a long time and can’t seem to get this to work –

My code is here: 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>

​

Can anybody tell me where I’m going wrong?

Basically I want ‘Title’ & ‘Subtitle’ to be in the center of the ‘.griditem’ box on rollover. I’m sure this is really simple, but I’ve been staring at this so long now I’m overlooking the obvious… Any help would be greatly appreciated!

Thanks!

Answer 1

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;