html - 垂直文本对齐不会在 div 中工作

Question

我试图让 div 中的文本居中并位于中间，但无法让它移动到中间。我试过将它放在一个跨度内，但仍然无济于事。

#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

这就是你想要的

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;
}

这是演示:

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