网页上的Css位置

Question

有人可以帮我吗？我想做这个设计，但我有位置问题。这是图像 Here is code

> https://plnkr.co/edit/Smyes7rZXVcqq5IugW2o?p=preview

Answer 1

以下骨架最适合您。

设置父div的高度并显示到表格（min-height赢了，这里为你工作）。如果将子div的显示设置为table-cell并将vertical-align设置为middle，则可以垂直对齐父div中的内容。即使内容高度发生变化，子内容也会自动垂直对齐。

<div class="container">
  <div class="col-sm-6 left">
    <div class="inner">
      <span>become our partner</span>
      <a href="#">contact us</a>
    </div>
  </div>

  <div class="col-sm-6 right">
    //right side content
  </div>
</div>

.left{
  height: 500px;
  background: #ccc;
  display: table;
}
.inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.inner span, .inner a{
  display: block;
  text-transform: uppercase;
}