垂直對齊滾動效果

Question

我想在使用滾動效果的同時垂直對齊我的文本（這是多行）。我嘗試將vertical-align: middle;放入我的代碼中，但它不起作用。

我的CSS代碼

.splash-container { 
    background: #ffffff; 
    z-index: 1; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: fixed; 
    top: 100px; left: 0; bottom: 0; right: 0; 
    /*margin-top: 20%;*/ 
} 

.splash { 
    width: 80%; 
    height: 50%; 
    margin: auto; 
    text-align: center; 
} 

.splash-head { 
    font-size: 20px; 
    font-weight: 900; 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
    color: #333; 
    border: 3px solid #333; 
    padding: 1em 1.6em; 
    border-radius: 5px; 
    line-height: 1em; 
} 

.splash-subhead { 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
    color: #333; 
    letter-spacing: 0.05em; 
    opacity: 0.8; 
} 

.content-wrapper { 
    position: absolute; 
    top: 100%; 
    z-index: 2; 
    background: #f2f2f2; 
} 
#description { 
    padding: 50px; 
} 

下面是HTML：

<div class="splash-container"> 
     <div class="splash"> 
      <h1 class="splash-head">Title</h1> 
      <p class="splash-subhead"> 
       Text 
      </p> 
      <p><a href="..." >Button</a></p> 
     </div> 
    </div> 

<div class="content-wrapper"> 
    <div class="content"> 
     <div id="description">(Text that will scroll over)</div><hr> 
    </div> 
</div> 

我想防濺容器具有垂直對齊，使所有的文字在它是在中間的屏幕。我試着用vertical-align: middle這樣做，但沒有奏效。

任何想法？謝謝。

Answer 1

這是你要找的東西嗎？

html, body { margin: 0; height: 100%; } 
 

 
.splash-container { 
 
    background: #ffffff; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
    display: table; 
 
    /*margin-top: 20%;*/ 
 
} 
 

 
.splash { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.splash-head { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    font-weight: 900; 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    border: 3px solid #333; 
 
    padding: 1em 1.6em; 
 
    border-radius: 5px; 
 
    line-height: 1em; 
 
} 
 

 
.splash-subhead { 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    letter-spacing: 0.05em; 
 
    opacity: 0.8; 
 
} 
 

 
.content-wrapper { 
 
    position: absolute; 
 
    top: 100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 2; 
 
    background: #f2f2f2; 
 
} 
 
#description { 
 
    padding: 50px; 
 
}

<div class="splash-container"> 
 
    <div class="splash"> 
 
    <h1 class="splash-head">Title</h1> 
 
    <p class="splash-subhead"> 
 
     Text 
 
    </p> 
 
    <p><a href="..." >Button</a></p> 
 
    </div> 
 
</div> 
 

 
<div class="content-wrapper"> 
 
    <div class="content"> 
 
    <div id="description">(Text that will scroll over)</div><hr> 
 
    </div> 
 
</div>

Answer 2

編輯：LGSon發佈了更優雅的解決方案看！

https://jsfiddle.net/0xt6r1s7/

我不知道滾動DIV應該做的，但是這將垂直/水平居中爲vertical-align: middle;

添加了.splash使用僞元素一個可怕的灰色邊框所以它更清晰哪裏.splash元素是。

.splash-container { 
 
    background: #ffffff; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; left: 0; bottom: 0; right: 0; 
 
    text-align:center; 
 
} 
 
.splash-container:before { 
 
    content:""; 
 
    width:1px; 
 
    display:inline-block; 
 
    height:100%; 
 
    vertical-align:middle; 
 
} 
 

 
.splash { 
 
    border:1px solid #ddd; /* Demo purposes, as button has some space underneath it which makes it look out of alignment */ 
 
    width: 80%; 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align:middle; 
 
    display:inline-block; 
 
} 
 

 
.splash-head { 
 
    font-size: 20px; 
 
    font-weight: 900; 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    border: 3px solid #333; 
 
    padding: 1em 1.6em; 
 
    border-radius: 5px; 
 
    line-height: 1em; 
 
} 
 

 
.splash-subhead { 
 
    font-family: "Lucida Sans", Helvetica, sans-serif; 
 
    color: #333; 
 
    letter-spacing: 0.05em; 
 
    opacity: 0.8; 
 
} 
 

 
.content-wrapper { 
 
    position: absolute; 
 
    top: 100%; 
 
    z-index: 2; 
 
    background: #f2f2f2; 
 
} 
 
#description { 
 
    padding: 50px; 
 
}

<div class="splash-container"> 
 
     <div class="splash"> 
 
      <h1 class="splash-head">Title</h1> 
 
      <p class="splash-subhead"> 
 
       Text 
 
      </p> 
 
      <p><a href="..." >Button</a></p> 
 
     </div> 
 
    </div> 
 

 
<div class="content-wrapper"> 
 
    <div class="content"> 
 
     <div id="description">(Text that will scroll over)</div><hr> 
 
    </div> 
 
</div>