垂直和水平中心文本响应

我想使一个网站使用视差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

垂直和水平中心文本响应

回答

相关问题