垂直中心兩個不同高度的並排側文本列

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

我想你需要的就是把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%; 
} 

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

您可以使用display：table;和顯示：表細胞;爲了垂直居中對齊。 ，你需要添加也高度：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%; 
} 
*/ 

DEMOhttp://jsfiddle.net/a_incarnati/y2qe494t/3/

在這個其他演示中，有一個寬度爲1％的div中心，因此不能展開全高。

DEMO2http://jsfiddle.net/a_incarnati/y2qe494t/4/