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

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

What is the best way to customize the appearance of a table using CSS?

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

Guide for verifying the minimum and maximum values when selecting a particular product from a dropdown menu

Troubleshooting problem with printing iframes on Firefox

Automatically numbering table columns with custom language localization in JavaScript using Jquery

I'm having trouble getting CSS to apply to my HTML file. Any idea why?

Executing a function when a webpage loads in Javascript

Increasing the value of a TypeScript variable using ngFor in an HTML template can enhance its usefulness

Issues with link behavior when using Angular UI-Router

By default, the sidebar is open on desktop devices while closed on mobile devices

Incorporate pug and sass into your React project for a more

The locator for the span class cannot be found or interacted with in Selenium

ReactJS does not trigger a re-render when changes are made to CSS

displaying a pair of inputs next to each other

Two boxes each taking up half of the width, with content placed inside a container

Styling the content area to fill the entire window in CSS will

Facing Challenges with Python Selenium while Accessing Specific Form Elements in Salesforce

Conceal or reveal radio buttons according to information in a table

Can we define a style or CSS for one element depending on the characteristics of another element?