0

我知道此类问题已多次发布，但我似乎无法弄清楚我的问题是什么。我有一块文本，我想将它垂直居中放在页面的左侧。我不想使用沉重的填充来使文本居中。如果访问者随窗口高度变化，我希望它垂直居中。

我有一段文字：

<div class="welcome">
    <p>Testing Stuff</p> <br /> <br />  
    <p>Testing Stuff</p> <br /> <br />
    <p>Testing Stuff</p> <br /> <br />
    <p>Testing Stuff</p>
</div>

这是欢迎的 CSS

.welcome {
position: absolute;
top:50%;
display: table;
vertical-align: middle;
padding-left: 50px;
font-family: 'Helvetica-Light';
font-size: 40px;
}

.welcome p{
display: inline;
vertical-align: middle;
padding: 10px;
background: black;
color: white;
opacity: 0.7;
white-space: nowrap;
}

目前 top:50% 将文本设置为从 50% 开始，但我需要文本块的中心为 50%，而不是从 50% 开始。

请帮忙。

4

2 回答 2

0

我用一些 jQuery 做了这个，希望这是你想要的：FIDDLE

HTML：

<div class="welcome">
    <div class="container">
        <p>Testing Stuff</p> <br /> <br />  
        <p>Testing Stuff</p> <br /> <br />
        <p>Testing Stuff</p> <br /> <br />
        <p>Testing Stuff</p>
    </div>
</div>​

CSS：

.welcome {
    position: absolute;
    padding-left: 50px;
    font-family: 'Helvetica-Light';
    font-size: 40px;
    height: 100%;
}

.welcome p{
    display: inline;
    vertical-align: middle;
    padding: 10px;
    background: black;
    color: white;
    opacity: 0.7;
    white-space: nowrap;
}

.container {
    position: absolute;
    top: 50%;
}​

JS：

$(function() {
    var containerHeight = $('.container').height();
    $('.container').css({'margin-top': -containerHeight/2});
});​

不带 jQuery的更新： FIDDLE

于 2012-12-13T03:41:13.873 回答
0

仍在检查这一点，但这是一种方法：

HTML

<div class="welcome">
  <div class="row">
      <p>Testing Stuff</p> 
      <p>Testing Stuff</p>
      <p>Testing Stuff</p>
      <p>Testing Stuff</p>
    </div>
</div>​

CSS

html,
body {
    height: 100%;
    width: 100%;
}
.welcome {
    height: 100%;
    width: 1px;
    display: table;
    padding-left: 50px;
    margin: auto;
    font-family: 'Helvetica-Light';
    font-size: 30px;
}
.welcome .row {
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;
}
.welcome .row p {
    display: table-cell;
    padding: 10px;
    background: black;
    color: white;
    opacity: 0.7;
}​

请注意使用100%onhtml, body行，它允许您使用margin: autoand height: 100%on.welcome元素。我修复了白色间隙（由于display: table-cell块内解释的“空白”，即这些p标签位于单独的行上，因此存在间隙。

http://jsfiddle.net/userdude/CuUgV/3/

于 2012-12-13T03:51:11.273 回答