垂直對齊中間表單元格以響應文本

Question

我想使用表格方法在div中將內容居中--- 請參閱此處的第一部分

一切都很好，但是我有一個問題。

我有2個div，每個div占用50％的寬度。 左div包含長度為px`的圖像。 右邊的div包含文本。 我可以為包含文本的div設置一個高度，它可以工作，但是，當我縮小屏幕時，它沒有響應。 誰能告訴我（如果有的話）一種隨着屏幕尺寸減小而減小帶有文本的div高度的技術？

我想並排保留2個div，並隨着屏幕變小來減小右側div的高度，其速率與右側圖像的減小相同。

請參閱jsfiddle HERE和下面的代碼進行演示：

的HTML

<div class="left">
   <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
</div>

<div class="right">
  <div class="table">
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
  </div>
</div>

的CSS

img {
  width: 100%;
}

.left, .right {
  float: left;
  width: 50%;
}

.table {
  height: 400px;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

Answer 1

你為什么要用桌子呢？ 使用伸縮。

 img { width: 100%; } .left, .right { width: 50%; /* float: left; */ } /* .table { height: 400px; display: table; } .table-cell { display: table-cell; vertical-align: middle; } */ body { display: flex; align-items: center; } 

 <div class="left"> <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg"> </div> <div class="right"> <div class="table"> <div class="table-cell"> <p>Test</p> <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p> </div> </div> </div> 

Answer 2

嘗試flexbox 。 更新小提琴這里 。

 .wrapper { display: flex; align-items: center; } .child { flex: 1; } img { width: 100%; } 

 <div class="wrapper"> <div class="child"> <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg"> </div> <div class="child"> <p>Test</p> <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p> </div> </div> 

Answer 3

我發現以下修改后的html結構有效

<div class="table">
    <div class="table-cell">
      <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
    </div>
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
</div>

當您必須將.table的高度更改為height: auto;

或者，也許您想使用代表視點高度的高度單位vh ：試試height: 50vh;

Answer 4

 <div class="table clearfix">
        <div class="left">
           <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
        </div>

        <div class="right">
            <div class="table-cell">
              <p>Test</p>
              <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
            </div>
        </div>
    </div>
 .clearfix:after {
                    visibility: hidden;
                    display: block;
                    font-size: 0;
                    content: " ";
                    clear: both;
                    height: 0;
                }
                .clearfix {
                    display: inline-block;
                }
                * html .clearfix {
                    height: 1%;
                }
                .clearfix {
                    display: block;
                }
                .table {
                    width: 1000px;
                    margin: auto;
                }
                .left img {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
                .left,
                .right {
                    float: left;
                    width: 50%;
                    position: relative;
                    height: 100%;
                }
                .right {
                    display: table;
                }
                .table-cell {
                    display: table-cell;
                    vertical-align: middle;
                }

此代碼可以為您提供幫助。

Answer 5

我更新了您的小提琴： https : //jsfiddle.net/9bjan951/4/

基本上我已經做了：

• 添加了一個包裝元素
• 清除浮動，使包裝器達到高度
• 將右欄設置為絕對位置，並始終為其父欄設置100％的高度
• 將右桌子設置為100％的高度
• 對於狹窄的屏幕，文本將帶有滾動條溢出

大多數魔術都發生在這里：

.right {
  height: 100%;
  background: #c54a8d;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: auto;
} 

我希望這有幫助。