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>

我希望splash-container具有垂直对齐，以便其中的所有文本都位于屏幕中间。我尝试用vertical-align: middle执行此操作，但它不起作用。

有什么想法吗？谢谢。

Answer 1

你正在寻找这样的东西吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

编辑：LGSon发布了一个更优雅的解决方案！

https://jsfiddle.net/0xt6r1s7/

我不确定滚动div应该做什么，但是这将使用.splash

的伪元素垂直/水平居中vertical-align: middle;

添加了一个可怕的灰色边框，因此.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>

垂直对齐滚动效果

2 个答案: