如何居中對齊div中的文本

我想居中對齊文本垂直和水平在這個div內。所以在上面和下面都有相同的填充。如何居中對齊div中的文本

我如何用我當前的代碼做到這一點？我的小提琴：http://jsfiddle.net/hr2aLrc0/

<div style="height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 
 
    
 
    <h1>Your Title</h1> 
 
    <p>Title<br />Description</p> 
 
    
 
</div>

來源

2015-11-06 michaelmcgurk

正確的垂直對齊方式是從CSS的長期缺少的功能之一。有關解決方法，請參見[本頁]（http://www.jakpsatweb.cz/css/css-vertical-center-solution.html）。 – Phylogenesis

這是一個標準的問題，所以懷疑有沒有重複。 ;-)

延長你的風格/類text-align: center;

<div style="text-align: center; height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 

    <h1>Your Title</h1> 
    <p>Title<br />Description</p> 

</div>

垂直對齊並不容易。

它可以用java腳本完成，或者如果你用top: 0px和bottom: 0px;將你的div包裝在position: absolute風格的div中。然後你可以使用margin-top: auto; margin-bottom: auto; height: ???px來居中內部div。

<div style="position: absolute; top: 0; bottom: 0; left:0; right:0; height: auto; width: auto;"> 
    <div style="margin-top: auto; margin-bottom:auto; text-align: center; height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 

    <h1>Your Title</h1> 
    <p>Title<br />Description</p> 

    </div> 
</div>

來源

2015-11-06 13:41:40

重複中的好處。我發現這看起來更像我所要求的：http://jsfiddle.net/CtH9k/ – michaelmcgurk

是這個小提琴也會工作。但我不確定它是否適用於H1標籤。但這是可能的，那麼這將是一個很好的解決方案。我已經編輯了我的答案，以另一種方式向你展示。 –

試試這個：

div { 
 
    width: 250px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
}

<div style="height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 
 
    
 
    <h1>Your Title</h1> 
 
    <p>Title<br />Description</p> 
 
    
 
</div>

來源

2015-11-06 13:41:52

如何居中對齊div中的文本

回答

相關問題