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 を使用しないUPDATE : FIDDLE

于 2012-12-13T03:41:13.873 に答える
0

まだこれをチェックしていますが、ここに1つの方法があります：

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%行上での使用に注意してください。これにより、要素上でandhtml, bodyを使用できます。白いギャップを修正しました（ブロック内で解釈される「空白」のため、つまり、これらのタグは別の行にあるため、ギャップが発生します。margin: autoheight: 100%.welcomedisplay: table-cellp

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

于 2012-12-13T03:51:11.273 に答える