Question

I want to center an image and its title inside a div with this css code

.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}

By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.

Answer 1

Remove unnecessary CSS and use the following CSS:

.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
    margin-right:2%;
    display:inline;
}

DEMO