网页上的Css位置 [英] Css position on web page

问题描述

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

这是代码

Can someone help me with this? I want make this design, But I have problem with position. Here is image Here is code

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

推荐答案

以下骨架最适合您。

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

Set parent div's height and display to table (min-height won't work for you here). You can vertically align contents inside the parent div if you set child div's display to table-cell and vertical-align to middle. The child content will automatically align vertically even if the content height changes.

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

这篇关于网页上的Css位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！