Question

这个问题可能之前曾被问过，但我的情况有点特殊。

我在另一个里面有两个div。两个div的高度都是未知的，但我能说出的外部div是它的最小高度。关键是 - 如果内部div小于外部div，我希望较小的div在外部div内垂直居中。我希望内部div扩展外部div，如果它大于外部div的最小高度。

我想在不使用任何脚本的情况下实现这一目标。

甚至可能吗？

示例代码：

<div id="outer" style="min-height:50px;">
   <div id="inner">
       Im here, I could be short, I could be long 
       and if I wrap - i could be tall
   </div> 
</div>

Answer 1

您可以使用flexbox执行此操作。看看这个jsFiddle

#outer {
    display: flex;
    align-items: center;
    justify-content: center;
}

Here是Flexbox的有用指南

Answer 2

使用meta_value_num，$args = array( 'post_type' => 'product', 'posts_per_page' => -1, 'meta_key' => 'future_availability_qty', 'meta_value_num' => 5, 'meta_compare' => '>' ); $products = new WP_Query( $args );和display: table。吊杆。

现场演示：

＆＃13;

display: table-cell

＆＃13;

vertical-align: middle

＆＃13;

Answer 3

基本上，没有任何脚本（JS / Jquery），这是不可能的。只有css你不能说较小的div放在另一个中并垂直对齐。

正如您在问题中所说，关键字“if”解释了自己。对于你想要的，你必须使用一些脚本代码。 Css只能声明元素的样式，而不能声明一个元素的条件。

如何垂直居中元素？

3 个答案: