如何在div上居中文本

我正在嘗試水平和垂直對齊文本。使用德橫軸，我做了：如何在div上居中文本

text-align: center;

它的工作完美。但是我希望文本也是以垂直軸爲中心。我讀過很多的解決方案，但每個人都有不同的解決方案，我有點迷茫......

http://jsfiddle.net/QLPTD/1/

謝謝！

來源

2012-06-21 Sonhja

好一兩件事你可以做的是

line-height: 25px;

你不提供一個高度，而是高度自動設置。你可以試試這個，大部分時間都適用於我。

來源

2012-06-21 16:03:03 javex

謝謝，但我需要用％來工作了不同的分辨率適應，因此它不會與我的問題恰好適合... – Sonhja

其實，如果我用％它完美的作品！謝謝！ – Sonhja

CSS有一個vertical-align屬性，但使用它可能有點棘手。

有關更多信息，請參閱this page。

我有一個外部div有display: table;屬性，然後內部表display: table-cell;。然後我可以在內部div上做vertical-align: middle;。所有樣式都應用於外部div。

HTML

<div id="outer"> 
    <div id="menu_secciones" > 
      Hello! 
    </div> 
</div>

CSS

#outer { 
    display: table; 
    background-color: #dddddd; 
    position: absolute; 
    left: 0; 
    height: 50%; 
    width: 100%; 
    top: 10%; 
} 
#menu_secciones 
{ 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
}

DEMO

來源

2012-06-21 16:06:09 sachleen

你可以考慮使用填充你的優勢：http://jsfiddle.net/QLPTD/15/

只要您的填充頂部和填充底部相同，並且相應地設置了顯示和高度，則文本應該顯示爲垂直居中

來源

2012-06-21 16:06:10 ToddBFisher

如果要垂直對齊文本，應該使用相同的行高和高度。

http://jsfiddle.net/QLPTD/7/

來源

2012-06-21 16:06:44

除了將OP的高度從％更改爲px。 –

線高度僅一個很好的解決方案，如果你要只有一行文字。提到的方法sachleen也是另一種可行的選擇。另一種方式，你可以做到這一點是通過使用絕對定位...例如....

<div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa nisi, pharetra elementum felis. Donec iaculis eros eu sapien pharetra tempor</p> 
</div> 


<style type="text/css"> 

    div { 
    width:300px; 
    height:300px; 
    border:1px solid red; 
} 

p { 
    display:block; 
    width:300px; 
    border:1px solid black; 
    position:absolute; 
    top:28%; 
    text-align:center; 
} 

</style>

最高％將取決於您的內容。

http://jsfiddle.net/krishollenbeck/gHXf7/

來源

2012-06-21 18:42:09

如何在div上居中文本

回答

相關問題