将一个块垂直居中于另一个块的底线上方

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％吗？

这是一个固定的50px负上边距的例子：

.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包装你的图例和下面的文字并使其位置：relative和following可以设置为position：absolute

检查此代码段

case $1 in
'+') : handle + ;;
'-') : handle - ;;
'*') : handle *;;
'/') : handle /;;
*) echo Unrecognized operator: $1 >&2;;
esac

$info = curl_getinfo($ch);
$start = $info['header_size'];
$body = substr($result, $start, strlen($result) - $start);

另一种使用flexbox的解决方案

.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>

希望这有帮助