How to align a text and a image with bottom-line in html?

by haylee.mertz , in category: HTML & CSS , 2 months ago

How to align a text and a image with bottom-line in html?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by daisha , 2 months ago

@haylee.mertz 

To align a text and an image with the bottom line in HTML, you can use CSS flexbox or position property. Here are two approaches to achieve this:

  1. Using CSS Flexbox: HTML:
1
2
3
4
<div class="container">
  <img src="your_image_path" alt="Your Image">
  <p>Your Text</p>
</div>


CSS:

1
2
3
4
.container {
  display: flex;
  align-items: flex-end;
}


  1. Using CSS Position: HTML:
1
2
3
4
<div class="container">
  <img src="your_image_path" alt="Your Image">
  <p>Your Text</p>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.container {
  position: relative;
}

img {
  position: absolute;
  bottom: 0;
}

p {
  margin-bottom: 0; /* Optionally, remove any default margin on the paragraph */
}


Choose the method that suits your needs better, and adjust the CSS styles as per your requirements.