Align a block at the vertical center above the bottom line of another block

Question

Align a block at the vertical center above the bottom line of another block

Here is the HTML code I am working with:

<div class="image">Image</div>
<div class="legend">
  Legend<br/>
  Width can vary, but height needs to be adjustable as well.<br/>
  The middle of the legend should align exactly at the bottom of the image, regardless of their respective heights.
</div>
<div class="following">The following text must come right after the legend, irrespective of their sizes.</div>

This is my desired outcome :

https://i.sstatic.net/iQAfZ.png

This is what I attempted :

.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 what I ended up with : https://i.sstatic.net/8IJ4N.png

The issue is that I do not want any gap between the legend and the following text.

You can find the complete code attempt on CodePen here.

Question : Is there a way to achieve the desired outcome without using JS?

(Just for reference, I have also provided a solution involving JavaScript)

css centering

Answer 1

Answer №1

Are you familiar with determining the height of an element? Do you specifically require it to be exactly 50%?

Check out this example featuring 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/>
  variable height <br/>
  ensure the middle of the legend aligns precisely at the bottom of the image, regardless of their respective heights
</div>
<div class="following">The following text should directly follow the legend, irrespective of their heights.</div>

Alternatively, here is another approach (although it may not be exactly what you are seeking) but still a noteworthy 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/>
  variable height<br/>
  ensure the middle of the legend aligns precisely at the bottom of the image, regardless of their heights.
</div>

Answer 2

Are you familiar with determining the height of an element? Do you specifically require it to be exactly 50%?

Check out this example featuring 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/>
  variable height <br/>
  ensure the middle of the legend aligns precisely at the bottom of the image, regardless of their respective heights
</div>
<div class="following">The following text should directly follow the legend, irrespective of their heights.</div>

Alternatively, here is another approach (although it may not be exactly what you are seeking) but still a noteworthy 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/>
  variable height<br/>
  ensure the middle of the legend aligns precisely at the bottom of the image, regardless of their heights.
</div>

Answer 3

Answer №2

If you want to achieve this layout, you can use a simple positioning technique by enclosing your legend and subsequent text within a div element. Set the parent div's position to relative, and the following text's position to absolute.

Take a look at this code snippet for reference:

.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 immediately after the legend, regardless of their heights.</div>
</div>

Alternatively, you can also achieve this layout using 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 needs to be aligned with the bottom of the image, regardless of their heights.</div>
    <div class="Aligner-item Aligner-item--bottom following">The following text should come right after the legend, regardless of their heights.</div>
  </div>
</div>

I hope this explanation and example help clarify things for you!

Answer 4

If you want to achieve this layout, you can use a simple positioning technique by enclosing your legend and subsequent text within a div element. Set the parent div's position to relative, and the following text's position to absolute.

Take a look at this code snippet for reference:

.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 immediately after the legend, regardless of their heights.</div>
</div>

Alternatively, you can also achieve this layout using 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 needs to be aligned with the bottom of the image, regardless of their heights.</div>
    <div class="Aligner-item Aligner-item--bottom following">The following text should come right after the legend, regardless of their heights.</div>
  </div>
</div>

I hope this explanation and example help clarify things for you!

Align a block at the vertical center above the bottom line of another block

Answer №1

Answer №2

Similar questions

A bottom border that spans the entire width, complete with padding

Tips for creating various column widths within a single row

Exploring the beauty of background color curves in React Native

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Element was removed upon clicking only once

Center align Bootstrap 4 dropdown menu

How can you determine if a DIV element is within view in HTML (without being overflowed)?

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Using attribute value for CSS background-image styling is a handy technique to

Getting the most out of setInterval() - a guide in jQuery

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Implementing a CSS codepen within a React Material-UI component

Updating the size of the caret in input fields with Bootstrap 5

Achieving functionality with dropdown menus in jQuery

Creating a dynamic navbar in an ASP.NET website by populating it with data from a

Struggling with creating a website: CSS and HTML headaches

Spaces between dotted outlines featuring a gradient backdrop

CSS: "Magazine Writer" design featuring a floating box and diverse HTML elements

After examining the width properties in the CSS code, it was discovered that one particular icon is larger in