Question

我试图让div中的文本居中并位于中间但不能让它移动到中间。我试过把它放在一个范围内，但仍无济于事。

＆＃13;

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

＆＃13;

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

＆＃13;

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

这是demo：

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

Answer 2

尝试将text-align: center;和vertical-align: middle;应用于您的文字。将line-height设置为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

您只需要两行flexbox。父母display:flex和孩子margin:auto。无论父母的大小如何，孩子都将在垂直和水平方向居中。

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

有许多不同的方法可以垂直居中文本和元素。在这种情况下，您可以使用flexbox来实现它，而无需任何额外的标记。使用此方法的优势，而不是设置line-height等于div，如果#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>

renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});

var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);
imgData1 = renderer.domElement.toDataURL();

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

4 个答案: