垂直对齐中间表单元格以响应文本

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

我希望这有帮助。