2013-12-23 28 views
0

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

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

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

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

任何幫助,將不勝感激!

謝謝!

回答

1

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

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

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

+0

完美!非常感謝! – Hummus

0

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

.title 
    { 
     margin-top:25%; 
    } 

demo here

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

+0

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

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

與jQuery

1

您可以使用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; 
} 
0

試試這個: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; 
}