Question

问题：

是否可以将浮动 div 中的子元素垂直居中，与浮动 div 的动态高度相对应？

背景

我正在使用WordPress主题，其中包含用于创建列的短代码。列是通过浮动div创建的。因此，我想坚持使用float，而不是像对类似问题（Vertically center content of floating div）所建议的那样使用表格布局。

我希望结果能够快速响应。图像高度随屏幕宽度而变化，因此我无法在 p 元素上设置明确的高度或边距。 p 中的文本也不止一行，因此我无法将行高设置为解决方案（Vertically centre a div）。

示例：

http://codepen.io/besiix/pen/rxdOWM

.wrapper {
  background-color: #50C5B7;
  padding: 5px;
}

.image {
  width: 100%;
}

.clear {
  clear: both;
}

.one-half {
  float: left;
  width:48%;
  margin-right: 4%;
  background-color: lightgrey;
  position: relative;
  display: inline;
  box-sizing: border-box;
}

.last {
  clear: right;
  margin-right: 0;
}

<section class="wrapper">
  <div class="one-half">
    <p class="v-center"> This wants to be centered vertically in relation to the image on the right.</p>
  </div>
  <div class="one-half last">
    <img class="image" src="http://www.premiercottages.co.uk/images/regions/Scotland.jpg">
  </div>
  <div class="clear"></div>
</section>

Answer 1

您可以使用flexbox，请参阅jsfiddle https://jsfiddle.net/d5Lptwut/2/

<section class="wrapper">
  <div class="one-half vertical-align">
    <p> This wants to be centered vertically in relation to the image on the right.</p>
  </div>
  <div class="one-half last">
    <img class="image" src="http://www.premiercottages.co.uk/images/regions/Scotland.jpg">
  </div>
</section>

.wrapper {
    background-color: #50C5B7;
    padding: 5px;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.image {
    width: 100%;
    height: auto;
}

.one-half {
    width:48%;
    margin-right: 4%;
    background-color: lightgrey;
    display: inline-block;
    box-sizing: border-box;
}

.vertical-align {
    flex-item-align: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;

}
.last {
    margin-right: 0;
}

Answer 2

你可以尝试这个：

[from, to]

DEMO HERE

Answer 3

您可以使用display: inline-block，这允许vertical-align元素：

http://codepen.io/yukulele/pen/bEvYEZ?editors=1100

浮动父母的垂直中心孩子

3 个答案: