垂直对齐中间 table 响应文本的单元格

Question

我想使用 table 方法将内容置于 div 中心 --- see first section here

一切都很好，但是我有一个问题。

我有 2 个 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

为什么要使用 table？使用 flex.

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. Updated fiddle here。

.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

我更新了你的fiddle：https://jsfiddle.net/9bjan951/4/

基本上我所做的：

添加了包装器元素
清除浮动，使包装器获得高度
将右列设置为绝对位置并始终为其父列提供 100% 的高度
将右侧 table 设置为 100% 高度
对于窄屏幕，文本会随着滚动条溢出

大部分魔法发生在这里：

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

希望对您有所帮助。

垂直对齐中间 table 响应文本的单元格

Vertical align middle table cell responsive with text

html

css

centering