Question

我有两列 - 一列70％，一列宽30％。对于内容，70％div的高度比30％div中的图像大很多。我试图将30％div垂直居中，但vertical-align无法正常工作。

有谁知道如何将30％div与其父母对等？

这是jsfiddle

HTML

<div style="padding:50px;">
  <div class="col-2-70-30-grid">
    <div class="col-70">
      <h1>Random Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec ante ligula. Mauris accumsan mollis fringilla. Cras sed libero ac magna mollis malesuada quis a felis. Sed in justo non elit rutrum maximus. Integer vulputate velit sed elit
        porta, id placerat libero tincidunt. Sed pretium vehicula nisl, pharetra euismod sapien. Sed blandit eros purus, sed pulvinar nisl viverra quis. Nunc scelerisque at nisi eu viverra. Donec suscipit molestie elit in tempor. Quisque interdum felis
        a luctus euismod.</p>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra euismod eros, eu varius risus ullamcorper eu. Sed quis orci in nunc varius condimentum.</p>
    </div>
    <div class="col-30">
      <img style="width:100%;" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    </div>
  </div>
</div>

CSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.col-2-70-30-grid { font-size:0;width:100%; }
.col-2-70-30-grid .col-70 { border:1px solid blue;display:inline-block;width:70%;font-size:24px;padding:10px; }
.col-2-70-30-grid .col-70 h1 { color:#7DC246;font-weight:700;font-size:32px;line-height:60px; }
.col-2-70-30-grid .col-70 p { font-size:16px;color:#5f6a7d;line-height:26px; }
.col-2-70-30-grid .col-30 { border:1px solid red;display:inline-block;vertical-align:middle;width:30%;font-size:24px; }

Answer 1

这里使用flexbox的简单性和可维护性可能最好。

现场演示：

＆＃13;

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.col-2-70-30-grid { font-size:0;width:100%; }
.col-2-70-30-grid .col-70 { border:1px solid blue;display:inline-block;width:70%;font-size:24px;padding:10px; }
.col-2-70-30-grid .col-70 h1 { color:#7DC246;font-weight:700;font-size:32px;line-height:60px; }
.col-2-70-30-grid .col-70 p { font-size:16px;color:#5f6a7d;line-height:26px; }
.col-2-70-30-grid .col-30 { border:1px solid red;display:inline-block;width:30%;font-size:24px; }

.col-2-70-30-grid {
  display: flex;
  align-items: center;
}

＆＃13;

<div style="padding:50px;">
  <div class="col-2-70-30-grid">
    <div class="col-70">
      <h1>Random Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec ante ligula. Mauris accumsan mollis fringilla. Cras sed libero ac magna mollis malesuada quis a felis. Sed in justo non elit rutrum maximus. Integer vulputate velit sed elit
        porta, id placerat libero tincidunt. Sed pretium vehicula nisl, pharetra euismod sapien. Sed blandit eros purus, sed pulvinar nisl viverra quis. Nunc scelerisque at nisi eu viverra. Donec suscipit molestie elit in tempor. Quisque interdum felis
        a luctus euismod.</p>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra euismod eros, eu varius risus ullamcorper eu. Sed quis orci in nunc varius condimentum.</p>
    </div>
    <div class="col-30">
      <img style="width:100%;" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    </div>
  </div>
</div>

＆＃13;

JSFiddle版本：https://jsfiddle.net/vogxr5Lb/

Answer 2

以下是使用display: table和display: table-cell代替flexbox的答案。

现场演示：

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.col-2-70-30-grid { font-size:0;width:100%; }
.col-2-70-30-grid .col-70 { border:1px solid blue;display:inline-block;width:70%;font-size:24px;padding:10px; }
.col-2-70-30-grid .col-70 h1 { color:#7DC246;font-weight:700;font-size:32px;line-height:60px; }
.col-2-70-30-grid .col-70 p { font-size:16px;color:#5f6a7d;line-height:26px; }
.col-2-70-30-grid .col-30 { border:1px solid red;display:inline-block;width:30%;font-size:24px; }

.col-2-70-30-grid {
  display: table;
}

.col-2-70-30-grid > * {
  display: table-cell;
  vertical-align: middle;
}

<div style="padding:50px;">
  <div class="col-2-70-30-grid">
    <div class="col-70">
      <h1>Random Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec ante ligula. Mauris accumsan mollis fringilla. Cras sed libero ac magna mollis malesuada quis a felis. Sed in justo non elit rutrum maximus. Integer vulputate velit sed elit
        porta, id placerat libero tincidunt. Sed pretium vehicula nisl, pharetra euismod sapien. Sed blandit eros purus, sed pulvinar nisl viverra quis. Nunc scelerisque at nisi eu viverra. Donec suscipit molestie elit in tempor. Quisque interdum felis
        a luctus euismod.</p>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra euismod eros, eu varius risus ullamcorper eu. Sed quis orci in nunc varius condimentum.</p>
    </div>
    <div class="col-30">
      <img style="width:100%;" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    </div>
  </div>
</div>

JSFiddle版本：https://jsfiddle.net/vogxr5Lb/1/

在内联块列中垂直居中图像

这是jsfiddle

2 个答案: