使HTML表格行對齊到表格單元中最大圖像的高度

Question

在這個小提琴中： http : //jsfiddle.net/tvqdrwp9/3/

我想要圖像（可以是任何大小）來拉伸所有相鄰表格單元的高度以進行匹配。 只有2行，每行2個單元格。 一個單元格包含圖像，另一文本框。 我希望文本單元格與相鄰圖像的高度匹配。 我有溢出：隱藏在單元格上，因此圖像水平溢出不是問題。

方框2和3中的文本應在中間垂直對齊，並且行應由方框1和4中的圖像高度決定。

我不明白為什么我在每個圖像的底部仍然出現紅線。

 .about-boxes { display: table; max-width: 600px; } .about-box-row { display: table-row; height: 100%; } .about-box { display: table-cell; vertical-align: middle; width: 50%; overflow: hidden; } .about-box img { width: auto; height: 100%; } .about-box-1, .about-box-4 { background: red; } .about-box-2, .about-box-3 { background: #CCC; color: #000; } 

 <div class="about-boxes"> <div class="about-box-row"> <div class="about-box about-box-1"> <img src="http://dummyimage.com/300x180/000/fff"> </div> <div class="about-box about-box-2"> <h2>Text</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis velit repellat voluptate eum est re- iciendis eius recusandae molestiae iusto, dolor quis- quam voluptas.</p> </div> </div> <div class="about-box-row"> <div class="about-box about-box-3"> <h2>Text</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisic- ing elit. Perspiciatis velit repellat voluptate eum est reiciendis eius recusandae molestiae iusto, dolor quisquam voluptas.</p> </div> <div class="about-box about-box-4"> <img src="http://dummyimage.com/320x360/000/fff"> </div> </div> </div> 

Answer 1

您可以使用display: block或vertical-align: middle校正圖像的對齊方式。

.about-box img {
  width: auto;
  height: 100%;
  display: block;
}

要么..

.about-box img {
  width: auto;
  height: 100%;
  vertical-align: middle;
}

兩者都可以。