Align Text to The Bottom of a Div

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

Align text to the bottom of a div

Flex Solution

It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.

.wrap {  height: 200px;  width: 200px;  border: 1px solid #aaa;  margin: 10px;  display: flex;}
.wrap span {  align-self: flex-end;}

<div class="wrap">  <span>Align me to the bottom</span></div>

Align text baseline to bottom of div

Add a ::before pseudo element with 100% height and display: inline-block; and use it to vertically align the <span> to the baseline:

div {  height: 80px;  width: 300px;  background: #ff5;  position: relative;}
div::before {  display: inline-block;  height: 100%;  content: '';}
span {  font-size: 30px;  vertical-align: baseline;}

<div>  <span>TEST gjp ABC</span></div>

CSS Align text at bottom of div

The main thing here is to understand what you're dealing with:

• what you're asking for is for the baseline of the font to be aligned with the bottom of the parent container,
• what you need to realize is that (in your image), the text in the div is positioned correctly

You should be able to achieve what you need by tweaking font-size and line-height and using position: absolute; or position: relative;.

font-size

Your image shows the text is either at or almost at the bottom of the parent div. The reason it's not is that the font-size of an element includes both the ascenders and descenders. You can see this by changing the text to something like "Apropos". You'll then see that the extra bit of space is for the tails of letters like g, j, p, q, and y.

line-height

The other thing that is probably going on is that the line-height for the text is some value greater than 1. You can check this by inspecting the element and finding out of the height (minus padding, borders, and margins) is still greater than the font-size.

You can set the value line-height: 1; to force the lines of text to be exactly the same height as the font-size declaration specifies, but beware that this will cause words to 'collide' when there's more than one line of text.

Mobile -vs- desktop

This leaves the matter of the difference between desktop and mobile. With a thorough understanding of font-size and line-height, you should be able to:

• reliably position the text so that the bottom of the text element aligns with the bottom edge of the parent element, and
• use position: absolute; or position: relative; to move the element into the precise position you need

This is what you've already been doing. But if it doesn't work across devices, then what is probably happening is that your font-size is different across the different devices. There's more than one reason why this might be true. For example:

• your mobile device may have a different base font size than the desktop browser; since the text you're working with is sized in ems, this could be a factor (you've done it right by using ems for the positioning too, but it's possible if a pixel font size at or near the root is different per device that something in the cascade winds up different)
• your CSS framework--if any--may adjust font sizes for small screens

I think it's likely that you can solve the problem with some combination of media queries and pixel sizes.

I would try something like the following, and if it doesn't work, then start writing media queries to account for the situations where the size/position is out of the acceptable range (note that if this is being caused by a CSS framework, you should be able to find the media queries it's using and use them yourself):

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

Pixel sizes aren't inherently bad, and since virtually everything now allows text to scale, there's usually no reason not to use them if they make things simpler. That said, if you do have a compelling case to use ems, try with pixels first and convert to ems once you've got it working. If it worked in pixels but not in ems, then you'll need to inspect the cascade to see what's different and why.

centre align container div and align text to bottom of div

.container{display:flex;}.column1, .column2{  width:200px;   margin: 10px;  border:solid 1px #ccc;  flex-direction:column;  }.column2{
justify-content:flex-end;display:flex;}#img{  max-width: 100%;
}p{ margin:0;}.container {  width: 80%;  padding-top: 100px;  margin: 0 auto;
}

  <div class="container">    <div class="img column1">      <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAdVBMVEXMzMwAAADPz8/S0tLU1NS4uLjDw8OMjIyrq6vHx8ezs7OmpqbBwcHX19dRUVGampp2dnavr69jY2OdnZ1eXl4aGhp+fn5sbGynp6dKSkp4eHg6Ojp/f39ERERmZmYhISEoKCgNDQ2Tk5NXV1cuLi43NzctLS2IdN5EAAAE4ElEQVR4nO3Ye3uqOBAHYCYJIILcrTfwAtrv/xF3wi1E291297T6PPt7/+jxoEYymSRDHAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf0RIJsTdxYcPfLvZv23i37X5Q4QTpmWZJpF1h14TTK9VtucPbJ3v3bFwm+kLyks2ZZ4WjpyuuFVepkXwElGQxYUOZXsjWs7uR9TkDv8VUU3rtrzRefmdGxYBkRpfp0R1nh+Imv6ScEqiuDzQpZCfN/FbVEUbT0mlROjNrvJNDzEQ3nq9WPEn3AN9JwiynmIgd9QIJaUK9uT3fa4pUdymV9LzgyBC8oc7nWdBRtUYA1lSJPv338/qoYHPKJ/ehhiIgorhixzbSLdZ0aK7IkRL3mdN/BZxblePFz1K3SEGwh2HzhFLSr6aCBzFohliII/raawDKnQTtJmiSfsnJwKngfvYLRWf1HJ4Q77RtDjKw26WCPNl/35TcZx1vvLHGJQmf1Y8K3RiTLNK5fT15PoRMq+l7oHVB+mTK8cYqGs8jdM8Ho7ThuaNZmMPpirXuplhLvjT1zg9uPcyN4nB8fhgFH6Tuux5qXKLpHDUeCdd9ospD2a5ylljVkVxpMXwjkootWIgE/6gGGPg8NQaoiEOtdDLZTyNPf/alyfYz4goFBXR6Uy0m+oDvUSMMbBukS8uzP2uNkMQuMeVlc8i0gutiYEsqAyU4GCf17ogCNazNcAj/6kx4NTMDpR4vJkX62GM1UZn7hQDq9uRNWayDwJnwZs9peWhm2G+qQ+WByoTf0dpVxMF825bAXkCsaVz3a8FQlxJ/ytDysQsBtk8BgE18zHjTNjKhyxw1L6b//MYKA4Cy93ux+yhP2+eG4OQaKxWOesrqau7vb7zL8Wgy4SC3uw+8FfC7qtTDIRbU5oFUdFSrX/u1WKQTmOodjflqLruC6IvzAW24nryLgs4UH2bUwy4jdzRj0dCue8X7/XmQjHdjUwvAVd3/dL48ZpoJYXGawFt7Ris2vd+dvHeOJRf13aaFAGV0u529Pw1MTQxqMjLqAk8LVhQxq/03ph+vpfzWuCnFM7HkUd/OTThk8N/9Y+Yb0ldQMt6N98bi6fGQM9MU+ikF/18Z4kcdZvVSNW8RuqyoFK8j8yDoA52C1fJUTGd7ArTuxopem4M1Nn0UMU35S5GDSX8965WvsXzvJf9pmgHQSzHFrKU+HVXK5nviITjatfKl2fXytU0ClzY8AIvBrpW7o6W5s9MW2tJVI3eSJyHIIx4bVnpIpyXlq05TDnqhTKg47hleE9/ZuLJEPdFslDtPNGnWpmL+/HZWZxOs9sVzVQa6SA85rPZFw6ncQOWWbe8cOizfu+QL/DszGXszl0ptXJjqx8mBryKX0LFn1jenaFcTV2gNrfHhDYxcOkcyu4Mxae6v1RTI7nRqH2BMxSuC9d0jeMznTLrPNHEQAQ7WsfxO53uHvDEhy/NNVMjeTE/j5Tllcwmc6TLrr0Rh/dP9eQ/EGKR5se3xd0Zb1CYmSGXVV7u7z/xj1yz6Sk32eT5vghmZ6r+sUzDb57T/piPT7n/wDm4dcjycLYuXuhsHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Nf8BZyMMUIZKGmqAAAAAElFTkSuQmCC">    </div>    <div class="comment column2">      <p>a paragraph</p>      <p>another paragraph</p>       <p>another paragraph</p> <p>another paragraph</p>    </div>  </div>

Make div align to bottom of column in card tailwind css

You can wrap your top content in an element and apply CSS flexbox to the parent element.

flex - applies CSS flexbox

flex-col applies CSS flex-direction: column which stacks the child elements vertically

justify-between applies CSS justify-content: space-between, which tells the element to distribute children evenly. The first and last child elements will be at the furthest ends of the parent element (beginning and end). Since the element has flex-col, the ends will be the top and bottom of the element.

flex-1 applies CSS flex: 1, which makes all the child elements fill to the parent's size; in this case, it will make the children all the same height.

---

Align details and images to the top and the buying info to the bottom

<div className="flex flex-1 flex-col justify-between">
 <div>//must wrap content to be aligned to top
  <img src={image} />
  <p>{nft.name}<p>
  <p>{description}</p>
 </div>
 <div>//must wrap content to be aligned to bottom
  <p>{price} Matic</p>
  <button>Buy</button>
 </div>
</div>

---

Additional example - this will have all of the images at the top and all of the content at the bottom

<div className="flex flex-1 flex-col justify-between">
 <img src={image} /> // aligned top
 <div>// aligned bottom
  <p>{name}<p>
  <p>{description}</p>
  <p>{price} Matic</p>
  <button>Buy</button>
 </div>
</div>

Center align text to the bottom of a div

#article-footer span{
position:absolute;
bottom: 0; 
left:50%;
margin-left:-50%;}

How to align text to the bottom right of my footer?

You can add position: relative to the parent (.footer-section) and use absolute positioning to align .creator-container to bottom right.

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
  position: relative;
}

.copyright {
  text-align: center;
}

.creator-container{
  position: absolute;
  bottom: 0px;
  right: 5px;
}

<section class="footer-section">

  <div class="copyright">
    <p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>

</section>

---

Related Topics