0

I am trying to vertically center some text in a responsive div. I was not able to figure it out. I would appreciate if I can get some help.

http://jsfiddle.net/X923f/1/

Thank you.

<style>    
.thumb {
    float: left;
    margin: 0px;
    padding: 0px;
    position:absolute;
    height:100%; 
    width:100%; 


}

.thumb img {
    width: 100%;
    padding: 0;
}
.thumb > div {
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;

}
.thumb:hover > div {
    display: block;
    opacity: 1.0;

}
.thumb > div div {
}

#text {
 vertical-align: middle;
  position: relative;
  z-index: 2;
  display: inline-block;
}


</style>
user3387048
  • 11
  • 3

1 Answers1

0

This how generally we vertically center some text in a responsive div:

.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle 
}

This the DIV that you want to vertically center <div class="container">

bennett_an
  • 1,718
  • 1
  • 16
  • 35
ASNAOUI Ayoub
  • 462
  • 2
  • 9