垂直和水平中心文本響應

我想使一個網站使用視差jquery pluin，我想第一個'幻燈片'是一個正確的標題在屏幕的中心。垂直和水平中心文本響應

我一直在努力做到這一點 - 水平對齊它很簡單，但我不能垂直對齊它。

有沒有辦法做到這一點，它的工作原理和響應能力？我已經包括一個小提琴，向您展示基本結構 - http://jsfiddle.net/SohamK/yKDWS/1/。我也轉載如下小提琴的HTML：

<div class="container"> 
<div class="title"> 
    <h1> My Title </h1> 
</div>

任何幫助，將不勝感激！

謝謝！

來源

2013-12-23 Hummus

試試這個你可以使用display屬性是這樣的：

.container { 
    width:100%; 
    height:100%; 
    display:table; 
    text-align:center; 
} 
.title { 
    display:table-cell; 
    vertical-align:middle; 
}

演示http://jsfiddle.net/yKDWS/13/

來源

2013-12-23 13:40:48 DaniP

完美！非常感謝！ – Hummus

基本上，這將永遠是請告訴我你頁面的確切標記，它取決於對準垂直中間

.title 
    { 
     margin-top:25%; 
    }

demo here

。

如果上面的演示解決了它，它的罰款，否則標記將被要求！ :)

來源

2013-12-23 13:25:06 NoobEditor

在分鐘，這是我的全部。我試圖改變邊緣，但它不完全在中心。難道我做錯了什麼？ – Hummus

$(function() { 
$('h1').css({ 
    'position' : 'absolute', 
    'left' : '50%', 
    'top' : '50%', 
    'margin-left' : -$(this).width()/2, 
    'margin-top' : -$(this).height()/2 
    }); 
});

與jQuery

來源

2013-12-23 13:27:07

您可以使用CSS屬性display:table，和使用vertical-align:middle & text-align:center。這完美地中心你的文本垂直和水平在你的div。

你的div .container將有display:table，你的DIV .title將與物業vertical-align:middle一個display:table-cell。

檢查Can I Use用於顯示：表瀏覽器兼容性。

完全CSS看起來就像這樣 -

.container { 
    display:table; 
} 
.title { 
    text-align:center; 
    display:table-cell; 
    vertical-align:middle; 
}

來源

2013-12-23 13:43:46

試試這個：Demo here

CSS

.container { 
    width:500px; 
    height:300px; 
    background:#333; 
    display: table; 
} 

.title { 
    color:#fff; 
    padding:0; 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
}

來源

2013-12-23 13:44:29 VahidRockv

垂直和水平中心文本響應

回答

相關問題