中心內的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垂直取決於最高同級

回答

相關問題