在浮动父级中垂直居中子级答案

【问题标题】：Vertically centre child in floated parent在浮动父级中垂直居中子级
【发布时间】：2016-05-02 21:17:59
【问题描述】：

问题：

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

背景：

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

我希望结果具有响应性。图像高度随屏幕宽度而变化，因此我无法在 p 元素上设置显式高度或边距。 p 中的文本也不止一行，所以我无法将 line-height 设置为解决方案 (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>

【问题讨论】：

标签： html css wordpress

【解决方案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;
}

【讨论】：

感谢您的解决方案，尽管这并不能回答浮动元素中是否可能出现这种结果的问题。使用 flexbox 和 inline-block 相比有什么特别的好处吗？
我会说，在您的情况下，将 flexbox 与 inline-block 相对使用并没有真正的好处。至于这是否可以使用浮动 div 的子元素来完成，答案是肯定的，但您需要将浮动元素放在其他元素中......比如jsfiddle.net/d5Lptwut/7，在你的情况下，我不确定你想要更改 HTML
这绝对是完美的！我可以将短代码条目包装在包装器 div 中，如您的 jsfiddle 所示，并且内容垂直对齐。这正是我所追求的，感谢您的帮助！

【解决方案2】：

你可以试试这个：

.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;
clear:both;
}

DEMO HERE

【讨论】：

【解决方案3】：

你可以使用display: inline-block，这允许vertical-alignelements：

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

【讨论】：

谢谢，优雅的解决问题！但同样，没有回答在仍然使用浮点数时是否可以找到问题的解决方案的问题。
同意，这引起了一些问题。我想知道为什么它被使用。据我所见，在仍然使用浮点数时没有解决方案。在这种情况下，我将重新编写主题的简码。谢谢。