Dylan Dylan - 3 months ago 13
CSS Question

vertical text alignment wont work within a div

I'm trying to get the text in the div to be centered and in the middle but cant get it to move to the middle. I've tried putting it within a span but still to no avail.



#head {
Border-radius:6px;
width:80%;
height:50px;
background-color:#F43434;
color:white;
margin: auto;
text-align:center;
margin-top:50px;
vertical-align:middle;
}

span {
display: inline-block;
vertical-align: middle;
}

<div id="head">
<span><b><i>Kilbride Classic Cuisine</i></b></span>
</div>




Answer

here is what you want

html

<div id="head">
<span><b><i>Kilbride Classic Cuisine</i></b></span>
</div>

css

#head {
    Border-radius:6px;
    width:80%;
    height:50px;
    background-color:#F43434;
    color:white;
    margin: auto;
    text-align:center;
    margin-top:50px;
    vertical-align:middle;
    border:1px solid;
}

span {
    display: inline-block;
    vertical-align: middle;
    line-height:50px;
}

here is demo:

https://jsfiddle.net/2Lqt039x/1/