Question

我正在尝试使用视差jquery插件创建一个网站，我希望第一个“幻灯片”成为屏幕中心的标题。

我一直在努力做到这一点 - 水平对齐它很简单但是我无法垂直对齐它。

有没有办法做到这一点有效并且也有响应？我已经包括一个小提琴，向您展示基本结构 - http://jsfiddle.net/SohamK/yKDWS/1/。我还复制了以下小提琴的html：

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

非常感谢任何帮助！

谢谢！

Answer 1

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

使用jquery

尝试此操作

Answer 2

您可以使用display这样的属性：

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

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

Answer 3

您可以使用CSS属性display:table，并使用vertical-align:middle＆amp; text-align:center。这完全是您的文本在div中垂直和水平居中的中心。

您的div .container将有display:table，而您的div [{1}}将拥有.title，其中包含display:table-cell。

检查Can I Use是否显示：表浏览器兼容性。

完整的CSS将如下所示 -

vertical-align:middle

Answer 4

基本上这总是将它与垂直中间对齐

  .title
    {
        margin-top:25%;
    }

demo here

你页面的确切标记是什么，取决于那个。

如果上面的演示解决了它，它的罚款，其他标记将是必需的!! ：）

Answer 5

试试这个：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;
}

垂直和水平居中文本响应

5 个答案: