中心垂直上方的另一个块的底线

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>

希望这有助于