Vertically center a block above another block's bottom line

Question

This is the HTML I have :

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

This is the result I want :

This is what I tried :

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

This is the result I got :

Problem is : I don't wan't to have this margin between legend and following text.

The whole attempt codepen is here

Question : any solution to get the desired result without JS ?

(for the record : this is a solution with JS)

Dekel · Answer 1 · 2016-11-27T19:36:30.937

Do you know the height of the element? Do you need it to be exactly 50%?

Here is an example with a fixed 50px-negative top margin:

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

Another option (which is probably not exactly what you are looking for) but it's a nice solution :)

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

And you need that element to "go up" exactly 50% of it's height? — Dekel, Nov 27 '16 at 19:09
Didn't know about the `attr` thing. I learned something, thanks,, but this is not what I'm looking for. — sylvain, Nov 27 '16 at 19:49

Geeky · Answer 2 · 2016-11-27T23:46:05.870

You can do this with simple positioning, wrapping your legend and the following text with a div and make its position:relative and following can be set as position:absolute

check this snippet

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

Another solution with 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>

Hope this helps

thanks, but the `.following` should be in the normal flow so I could continue to append content (sorry I wasn't clear engough in my description : I'll amend it) see http://codepen.io/sylvainbannier/pen/VmzEYe — sylvain, Nov 27 '16 at 21:24
ya for static elements which are immediate after position:absolute we need to set the margin-top with the height of the previous absolutely positioned element ..check this http://codepen.io/sahithiK/pen/woqYrm — Geeky, Nov 27 '16 at 22:13
for static element positioning after absolute http://stackoverflow.com/questions/6588309/static-elements-after-positionabsolute — Geeky, Nov 27 '16 at 22:13
regarding http://codepen.io/sahithiK/pen/woqYrm `margin-top:-27px;` won't do the trick because I don't know the height of the legend. http://stackoverflow.com/questions/6588309/static-elements-after-positionabsolute imply to know the height too. — sylvain, Nov 27 '16 at 23:12
I think you have to know the height to do the trick or else you cannot achieve this ,because using translate your chaning its position so the remaining space will be vacant — Geeky, Nov 27 '16 at 23:51
Am afraid you're probably right. That's why I settled for a JavaScript based workaround (added in my post if you're interested) — sylvain, Nov 27 '16 at 23:54

Vertically center a block above another block's bottom line

2 Answers2