How to align text to the bottom of a div using CSS

Question

How to align text to the bottom of a div using CSS

I am struggling to position the text 'About' at the bottom of an image. The red line marks the spot where I want the text aligned at the bottom. However, every method I try results in inconsistent outcomes when viewed on desktop and mobile devices. It currently displays correctly on my laptop, you can view it here (click the image to see the slide.)

This is what the HTML looks like: (hosted on GitHub using liquid tags)

<div class="slide_title">
    <span>{{ include.title }}</span>
</div>

<div class="slide_heading clickable">
    <img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
</div>

The CSS:

.slide .slide_title {
    font-size: 4.938em;
    color: #f8f8f8;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;

    pointer-events:none;

    position: absolute;
    left: 0.000em;
    top: 14.188em; /*default when no JavaScript is used, otherwise set in JS*/
}

.slide .slide_title span {
    position: absolute;
    bottom: -0.24em;

    white-space: nowrap;

    text-shadow: 0 0 0.05em #999999;
}

The text is within a div, styled with position: absolute, and positioned alongside my image (so the bottom of the div aligns correctly with the bottom of the image). Now I am trying to accurately position the text within the div.

Everything I have attempted has yielded inconsistent results. While it appears correctly on my desktop, there is a different offset on mobile devices.

Methods I have tried (to the best of my recollection):

I attempted giving the div a fixed offset in my script for positioning.
Adjusting the height of the div, which moved the text as desired.
Placing the text in a span inside the div and adjusting the span by setting its bottom property. This is the current method, and is the closest I have come to achieving consistent alignment across all platforms.

I also experimented with setting the vertical-align of the div to bottom, but the text did not shift at all.

Is there a reliable way to align text in this manner that will work universally?

Thank you!

Note: JQuery is being used to position the div.

html css

Answer 1

Answer №1

The crucial point to grasp here is the nature of your task:

you are requesting for the baseline of the font to align with the bottom of the parent container,
it's important to note that, in your image, the text within the div is correctly positioned

To achieve your objective, you can adjust the font-size and line-height, while utilizing either position: absolute; or position: relative;.

font-size

Your image depicts the text being at or nearly at the bottom of the parent div. This positioning discrepancy is due to the fact that an element's font-size accounts for both ascenders and descenders. You can observe this by changing the text to something like "Apropos," revealing the additional spacing for letters like g, j, p, q, and y.

line-height

Another factor at play is most likely the line-height setting exceeding 1. This can be confirmed by inspecting the element to check if the height (excluding padding, borders, and margins) surpasses the font size.

You can enforce uniform line heights by setting line-height: 1;, although beware that this may cause word overlap in multi-line scenarios.

Mobile -vs- desktop

The issue of desktop versus mobile differences remains unresolved. With a comprehensive understanding of font-size and line-height, you should be able to:

accurately position the text so that the bottom of the text element aligns with the parent element's bottom edge, and
utilize position: absolute; or position: relative; for precise adjustments

If inconsistency persists across devices, it is likely attributed to varying font sizes on different devices. This could result from various factors such as:

distinct base font sizes on mobile devices compared to desktop browsers, impacting em-based sizing used for alignment
CSS frameworks potentially adjusting font sizes for smaller screens

Implementing a combination of media queries and pixel dimensions could resolve this issue.

Consider trying the following approach, and if results remain unsatisfactory, proceed to customize media queries to address any discrepancies:

.slide-title {
  /* Enter your desired pixel values here */
  bottom: -3px;
  font-size: 16px;
  line-height: 1;
  position: absolute;
}

While pixel sizes are viable options, there is no inherent drawback given enhanced scalability features. However, if using ems is essential, initially testing with pixels before transitioning to ems can streamline troubleshooting. Identifying what differs in the cascade between pixel and em declarations will be pivotal if the latter proves more problematic.

Answer 2

The crucial point to grasp here is the nature of your task:

you are requesting for the baseline of the font to align with the bottom of the parent container,
it's important to note that, in your image, the text within the div is correctly positioned

To achieve your objective, you can adjust the font-size and line-height, while utilizing either position: absolute; or position: relative;.

font-size

Your image depicts the text being at or nearly at the bottom of the parent div. This positioning discrepancy is due to the fact that an element's font-size accounts for both ascenders and descenders. You can observe this by changing the text to something like "Apropos," revealing the additional spacing for letters like g, j, p, q, and y.

line-height

Another factor at play is most likely the line-height setting exceeding 1. This can be confirmed by inspecting the element to check if the height (excluding padding, borders, and margins) surpasses the font size.

You can enforce uniform line heights by setting line-height: 1;, although beware that this may cause word overlap in multi-line scenarios.

Mobile -vs- desktop

The issue of desktop versus mobile differences remains unresolved. With a comprehensive understanding of font-size and line-height, you should be able to:

accurately position the text so that the bottom of the text element aligns with the parent element's bottom edge, and
utilize position: absolute; or position: relative; for precise adjustments

If inconsistency persists across devices, it is likely attributed to varying font sizes on different devices. This could result from various factors such as:

distinct base font sizes on mobile devices compared to desktop browsers, impacting em-based sizing used for alignment
CSS frameworks potentially adjusting font sizes for smaller screens

Implementing a combination of media queries and pixel dimensions could resolve this issue.

Consider trying the following approach, and if results remain unsatisfactory, proceed to customize media queries to address any discrepancies:

.slide-title {
  /* Enter your desired pixel values here */
  bottom: -3px;
  font-size: 16px;
  line-height: 1;
  position: absolute;
}

While pixel sizes are viable options, there is no inherent drawback given enhanced scalability features. However, if using ems is essential, initially testing with pixels before transitioning to ems can streamline troubleshooting. Identifying what differs in the cascade between pixel and em declarations will be pivotal if the latter proves more problematic.

Answer 3

Answer №2

Consider trying the following code snippet:

<div class='container_wrapper'>
   <div class="container_title">
       <span>{{ include.title }}</span>
   </div>

   <div class="container_content clickable">
       <img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
   </div>
</div>

Here is the corresponding CSS:

.container_wrapper {
   position: relative;
}

.container_title {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}
.container_content {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}

To update dimensions with jQuery:

var w = $("container_content").width();
var h = $("container_content").height();
$(".container_wrapper").css({width: w, height: h});
$(".container_title").css({width: w, height: h, line-height: (h - 20px)});

Please note that this code has not been tested extensively, but it should function correctly. Adjust the [b]20px[/b] value according to the distance of the red-line from the bottom of the image.

Answer 4

Consider trying the following code snippet:

<div class='container_wrapper'>
   <div class="container_title">
       <span>{{ include.title }}</span>
   </div>

   <div class="container_content clickable">
       <img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
   </div>
</div>

Here is the corresponding CSS:

.container_wrapper {
   position: relative;
}

.container_title {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}
.container_content {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}

To update dimensions with jQuery:

var w = $("container_content").width();
var h = $("container_content").height();
$(".container_wrapper").css({width: w, height: h});
$(".container_title").css({width: w, height: h, line-height: (h - 20px)});

Please note that this code has not been tested extensively, but it should function correctly. Adjust the [b]20px[/b] value according to the distance of the red-line from the bottom of the image.

How to align text to the bottom of a div using CSS

Answer №1

font-size

line-height

Mobile -vs- desktop

Answer №2

Similar questions

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

The Jquery delete button is efficiently targeting and removing all image sources and identifiers within a Multiple Upload feature

Displaying an array value instead of a new value list in a React component

Creating an overlay effect when hovering over an image

Retrieving specific data from an SQL database using PHP

What is the best way to identify which JavaScript code is triggering or managing an event?

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

JavaScript Function Not Executed in Bottom Section

Various settings in JQuery UI Slider

Inject a dynamic URL parameter into an iframe without the need for server-side scripting

Vue JS: Extracting both the unique ID and value from an array of input simultaneously

jQuery fails to modify HTML according to its intended purpose

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

Modify the hue of the iron-icon upon being tapped

Markdown in Vue.js filters

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

Is there a way to adjust the speed of the transitions between animations?

I am experiencing an issue with the interaction between my "label" tag and "summary" tag. The details are not opening when I click on the label. Can someone please provide guidance on how to resolve this

Guide to changing the border color in a Material-UI TextField component styled with an outline design

Choose an element by its specific data attribute