中心垂直上方的另一個塊的底線

Question

塊這是HTML我有：

<div class="image">Image</div> 
<div class="legend"> 
    Legend<br/> 
    width variable height<br/> 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
</div> 
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 

這是我想要的結果：

這是我的嘗試：

.image { 
    height:100px; 
    background-color:red; 
} 
.legend { 
    transform:translateY(-50%); 
    background-color:blue; 
    width:300px; 
    margin:0 auto 
} 
.following { 
    background-color:yellow; 
    margin-top:-45px; 
} 

這就是我得到的結果：

問題是：我不希望在圖例和下面的文本之間有這個邊距。

The whole attempt codepen is here

問題：任何解決方案，得到期望的結果，而不JS？

（備案：this is a solution with JS）

Answer 1

你知道元素的高度？你需要它是完全50％？

這裏是一個固定的50像素負上邊距的例子：

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.legend { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:-50px auto 0; 
 
} 
 
.following { 
 
    background-color:yellow; 
 
}

<div class="image">Image</div> 
 
<div class="legend"> 
 
    Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
</div> 
 
<div class="following">The following text should follow immediatly the legend, regardless of the height of the legend or the image</div>

另一種選擇（這也許不完全是你在找什麼），但它是一個很好的解決方案： ）

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.legend { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:0 auto; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    position: absolute; 
 
    left: 50%; 
 
} 
 
.legend:after { 
 
    content: attr(following); 
 
    display: block; 
 
    width: 100vw; 
 
    clear: both; 
 
    position: absolute; 
 
    background-color:yellow; 
 
    height: auto; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    
 
} 
 
.following { 
 
}

<div class="image">Image</div> 
 
<div class="legend" following="The following text should follow immediatly the legend, regardless of the height of the legend or the image"> 
 
    Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
</div>

Answer 2

你可以用簡單的定位做到這一點，包裹你的傳奇，並與一個div下面的文字，使自己的立場：相對的，下面可以設置爲位置：絕對

檢查這個片段

.image { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
.legend { 
 
    transform: translateY(-50%); 
 
    background-color: blue; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.following { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    left: 0; 
 
}

<div class="image">Image</div> 
 
<div class="container"> 
 
    <div class="legend"> 
 
    Legend 
 
    <br/>width variable height 
 
    <br/>the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
    </div> 
 
    <div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 
 
</div>

與Flexbox的另一種解決方案

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.item{ 
 
    transform:translateY(-50%); 
 
} 
 
.center { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:0 auto; 
 

 
} 
 

 
.Aligner { 
 
    display: flex; 
 
    flex-direction:column; 
 
} 
 

 

 
.Aligner-item--top { 
 
    width:100%; 
 
    background:red; 
 
} 
 

 
.following { 
 

 
    width:100%; 
 
    background-color:yellow; 
 
    
 
}

<div class="Aligner"> 
 

 
    <div class=" Aligner-item Aligner-item--top image">Image</div> 
 
    <div class="item"> 
 
    <div class="Aligner-item center">Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image</div> 
 
    <div class="Aligner-item Aligner-item--bottom following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 
 
    </div> 
 
</div>

希望這有助於