Question

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

我有一段文字：

<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>

以下是 welcome

的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;
}

目前最高：50％设置文本从50％开始，但我需要文本块的中心为50％，而不是从50％开始。

请帮助。

Answer 1

我用一些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

Answer 2

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

<强> 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%行使用html, body，这样您就可以在margin: auto元素上使用height: 100%和.welcome。我修复了白色间隙（由于display: table-cell块中解释的“空白”，即那些p标签位于不同的行上，因此存在间隙。

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

在HTML中垂直居中文本的问题

2 个答案: