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

Question

我想使用表格方法将内容集中在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

我更新了你的小提琴：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;
} 

我希望这能有所帮助。

Answer 2

为什么要使用表？使用弯曲。

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 3

尝试flexbox。此处更新了fiddle。

.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 4

我发现以下修改后的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 5

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

此代码可能会对您有所帮助。