将文本与div中的图像垂直对齐

Question

I saw a similar post to this which is here but I noticed that no one answered and that when I do press the jsfiddle, it doesn't center it.

I have this current code and what I'm trying to accomplish is to have the image directly in the middle vertically inside the div. I've tried vertical-align and putting it in span and top % but nothing seems to work. I'm also using Chrome so I don't know if that matters. http://jsfiddle.net/y84mx/

    <div class="hours">
    <div id="sun">
        <img src="http://jsfiddle.net/img/logo.png" alt="Opening" height="auto" width="20%" align="left" vertical-align="middle" />
        <span>Hours</span>
    </div>
    </div>

Thanks!

Answer 1

You can use:

#sun {
    position:relative;
}

img {
    background: #3A6F9A;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}

Updated Fiddle

Answer 2

For both items set display: inline-block;
Then make sure to match the line-height of the <span> the height of the image.

Answer 3

Demo

HTML

<div id="hours"> 
    <span id="sun"> 
        <img src="http://jsfiddle.net/img/logo.png" alt="twibuffer"  /> 
    </span>  
    <span> Hours</span>
</div>

CSS

#hours {
    margin-bottom:2%;
    text-align: center;
}
#hours span {
    display: inline-block;
    vertical-align: middle;
}
#hours #sun {
    border: 1px solid red;
    /* to show the centering */
}

Answer 4

I have updated the fiddle , Please check

#sun{
 line-height : auto;
 border: 1px solid;
 text-align : center;  
}

.hours{
padding-left: 2%;
padding-right: 2%;
text-align: right;
color: #000;
font-size: 40px;
}

img {
  background: #3A6F9A;
}

Answer 5

Check out this http://jsfiddle.net/chetangawai/y84mx/9/

#sun{
  text-align:center;
    display:inline-block;
    border:solid
}

.hours{
    color: #000;
    font-size: 40px;
    padding-left: 2%;
    padding-right: 2%;

}

img {
     background: #3A6F9A;
}