垂直居中两个不同高度的并排文本列

Question

您好我想尝试这样的事情，

更新： 图解说明： 两条单切割线的长度必须相等，双切割线也必须相等。为了更大的屏幕，两个文本列之间的距离应该与中心相关。

我尝试使用以下代码来实现此目的，但是当屏幕尺寸发生变化时会产生问题。

<div style="width: 100%; height: 100%; background: none repeat scroll 0% 0% aqua; margin: 0px; padding: 0px;">
<div style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);">
  <div style="float: left; padding-right: 10%;">Some Text Long</div>
  <div style="float: right; padding-left: 10%; border-left: 1px solid red;">Some other long text</div>
</div>
</div>

Answer 1

您可以使用 display：table; 和 display：table-cell; 来集中垂直对齐。 并且您还需要将 height：100％添加到html和正文以及.containbox以使框展开到页面的完整高度：

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

.containbox{    
    display:table;
    width:100%; 
    height:100%;
 }

.leftbox, .rightbox{ 
    width:50%;
    display:table-cell;
    vertical-align:middle;
    width:50%;
    text-align:center;
    padding:2%;}

.rightbox{
    border-left:1px solid black;
 }

/* Remove comments to use another way to create the divider

.rightbox::before{ 
    content: "|";
    position:absolute;
    left:50%;
}
*/

DEMO http://jsfiddle.net/a_incarnati/y2qe494t/3/

在另一个演示中，有一个1％宽的div .center，带有一个分隔线，所以不能展开全高。

DEMO2 http://jsfiddle.net/a_incarnati/y2qe494t/4/

Answer 2

使用此HTML

<div class="containbox">
  <div class="leftbox">Some Text Long</div>
  <div class="rightbox">Some other long text</div>
</div>

和这个CSS

.containbox{display:block}
.leftbox, .rightbox{display:inline-block; width:45%; height:100%; text-align:center; padding:2%;}
.rightbox{border-left:1px solid #000}

并且请不要使用内联CSS，这是一个非常糟糕的做法，而是使用类名

您可以 see fiddle here

Answer 3

我认为你需要的是box-sizing CSS rule。在this plunker中，我使用此规则均匀地分隔列，然后使边框显示在除第一列之外的所有列上：

div {
  box-sizing: border-box;
  position: relative;
}

.col {
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #000;
  height: 100%;
  padding: 20px 3%;
}

.col:first-of-type {
  border-left: none;
}

.col-2 .col {
  width: 44%;

}

这是html：

<div class="col-wrapper col-2">
  <div class="col">Text</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

只要绝对定位元素固定为：

，处理绝对定位就很容易

.panel {
  position: absolute;
  width: 400px;
  margin-left: -200px;
  left: 50%;
}