Member Avatar for kezia_kristina

Hi all,
I want to set the text on the right side of image to bottom in a div tag.
depict like below:

______
| img |
| |
|_____| The text is here at the bottom of Image

But after trying some CSS code (using 'vertical-align:bottom'), I always got something like below (there is aways a padding on the bottom, even I set the padding-bottom to zero):
______
| img |
| | The text is here at the bottom of Image
|_____|

Here my code:

<div class='title'>
	<div class='date'>
			<!-- the image is a background of this 'div' -->
	</div>
	<h2 id='header2'>
	 The text is here at the bottom of Image
	</h2>
</div>


.title {
  padding:0 0 0 0;
  vertical-align:bottom;
  height:56px;
}

.date 
{
	float:left; width:59px; height:56px; overflow:hidden; 
	text-align:center; 
	background: url("someurlHere/icon.jpg") no-repeat;
}

#header2 {
  vertical-align:bottom;
  padding-bottom:0;
}

Anyone can help me?

  • 3 Contributors
  • 4 Replies
  • 374 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by xoinas

Dani AI

Generated

The root cause is that vertical-align only affects inline-level elements or table cells. An h2 is block-level by default, and its browser-default top/bottom margins often create the “extra padding” at the bottom that was observed. ’s markup + a floated .date likewise prevents simple inline alignment from working as expected.

A modern, robust fix is to make the container a flexbox so items can be aligned to the bottom of the row:

.title {
  display: flex;
  align-items: flex-end;
  gap: 8px; /* optional spacing between image and text */
}

Keep the image as the background on .date and remove the float so .date becomes a flex item. Reset the heading’s default vertical margins (set top and bottom margins to zero) so the text sits flush against the container bottom. This approach is responsive and avoids hard-coded positioning.

If legacy support is required, two other options exist: make both children behave like table-cells and use vertical-align: bottom, or use the absolute-position approach already suggested by (valid but brittle because it relies on fixed heights). For debugging, inspect computed margin/padding/line-height in dev tools — collapsed margins from headings are a common source of the gap. ’s suggestion to remove stray padding/margins is on point; combining that with a flex layout gives the cleanest, most future-proof result.

Recommended Answers

All 4 Replies

Member Avatar for rudevils

#header2 {
vertical-align:bottom;
padding-bottom:0;
}
Anyone can help me?

try this

#header2 {
  vertical-align:bottom;
  padding-bottom:0;
  float: left;
}
Member Avatar for kezia_kristina

No, it didn't work :(

Member Avatar for rudevils

sorry i didn't see height attribute in your ".title"
try it like this :

.title {
padding:0 0 0 0;
text-align: left;
}

.date {
width:59px; height:56px; overflow:hidden;
text-align:center; 
background: url("someurlHere/icon.jpg") no-repeat;
}

#header2 {
padding:0;
margin:0;
}
Member Avatar for xoinas

What about something like:

.title
{
  position: relative;
  width: 100px; 
  height: 100px; (put your dimensions, at least only the height)
}

#header2
{
  position: absolute;
  bottom: 0px;
  left: 0px; (or right:0px if you want to anchor it to the right-bottom corner)
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.