垂直文本对齐在div中不起作用

Question

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 1

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/

Answer 2

Try to apply text-align: center; and vertical-align: middle; to your text. Set line-height to the height of your head div .

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

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

Answer 3

All you need is two lines with flexbox . display:flex on the parent and margin:auto on the child. The child will be centered both vertically and horizontally regardless of parent size.

Guide to Flexbox

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

  <div id = 'head' style ='display:flex'> <div style = 'margin:auto'>Kilbride ... </div> </div> 

Answer 4

There are a number of different methods for vertically centring text and elements. In this case, you can achieve it, without the need for any extra markup, by using flexbox . The advantage of using this method rather than setting a line-height equal to the height if the div is that the text can break onto multiple lines and still be centred.

 #head { align-items:center; background-color:#f43434; border-radius:6px; color:#fff; display:flex; font-style:italic; font-weight:bold; height:50px; justify-content:center; margin:50px auto 0; text-align:center; width:80%; } 

 <div id="head">Kilbride Classic Cuisine</div>