中心内的DIV垂直取决于最高同级

我有一个外DIV（4）和三个内的DIV（1-3）。这里我不关心宽度。这关乎高度和垂直居中。我想让外部DIV（4）获得最高内部DIV（行A中的2）的高度。更重要的是，我希望其他内部DIV（A行中的1和3）垂直居中（相对于与最高内部DIV具有相同高度的外部DIV的高度）。

DIV的内容是动态的（比较行A和B），因此我不知道哪个内部DIV最高。到目前为止，我使用了一个jQuery解决方案来设置较小的DIV（红色标记）的边缘顶部，但我现在想用纯CSS来解决它。

来源

2016-11-11 Sailcomp

你可以发布你的问题jsfiddle？ – Ibrahim

使用display flex –

这是很容易使用flexbox - 属性align-items: center产生期望的结果 - 见下面的演示：

.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 1px solid red; 
 
} 
 
.wrapper > div { 
 
    border: 1px solid; 
 
}

<div class="wrapper"> 
 
    <div class="one">Some text here</div> 
 
    <div class="two"> 
 
    There is a lot of text here 
 
    <br>There is a lot of text here 
 
    <br>There is a lot of text here 
 
    <br> 
 
    </div> 
 
    <div class="three">Some 
 
    <br>text</div> 
 
</div>

来源

2016-11-11 16:00:04 kukkuz

@Sailcomp让我知道您对此的反馈，谢谢！ – kukkuz

.outera { 
 
    border:solid 1px #333; 
 
} 
 

 
.outera div { 
 
    width:20px; 
 
    border-radius: 16px; 
 
    background-color:#212121; 
 
    margin:10px; 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.outera .a1 { 
 
    height:20px; 
 
} 
 

 
.outera .a2 { 
 
    height:80px; 
 
} 
 

 
.outera .a3 { 
 
    height:50px; 
 
}

<div class='outera'> 
 
    <div class='a1'></div> 
 
    <div class='a2'></div> 
 
    <div class='a3'></div> 
 
</div>

来源

2016-11-11 16:01:03 oguzhancerit

您可以使用CSS Flexbox。

在下面的代码片段中，我用display: inline-flex;。看看下面的代码片段：

body { 
 
    padding: 20px; 
 
} 
 

 
.outer { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid #000; 
 
} 
 

 
.inner {} 
 

 
.a .element { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: red; 
 
} 
 

 
.b .element { 
 
    width: 20px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    background: green; 
 
} 
 

 
.c .element { 
 
    width: 20px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    background: blue; 
 
}

<div class="outer"> 
 
    <div class="inner a"> 
 
    <div class="element"></div> 
 
    </div> 
 
    <div class="inner b"> 
 
    <div class="element"></div> 
 
    </div> 
 
    <div class="inner c"> 
 
    <div class="element"></div> 
 
    </div> 
 
</div>

希望这有助于！

来源

2016-11-11 16:02:19

中心内的DIV垂直取决于最高同级

回答

相关问题