CSS Vertical-Align: Text-Bottom;

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>

How do I vertically align my text in a table header to the bottom?

It can be solved with the CSS property vertical-align set to bottom.

Like this

    .align-bottom {
vertical-align: bottom
}

<th class="align-bottom"></th>

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>

Vertically align text to the bottom of the box?

2020 Update

You can use CSS grid, flexbox or the original method with line-height:

body { display: flex } /* just to prettify */

div {

  margin: .5em;

  width: 6.25em; height: 6.25em;

  background: #eee;

  color: #333;

  text-align: center

}

.grid {

  display: grid;

  align-content: end;

}

.flex {

  display: flex;

  align-items: flex-end;

  justify-content: center

}

.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }

<div class='grid'>Hello</div>

<div class='flex'>Hello</div>

<div class='lh'>Hello</div>

Vertically align text from bottom to top

I've added transform-origin: center center;in your css. I hope this is what you need.

td span{

  border:1px solid;

  height:200px;

  transform-origin: center center;

  writing-mode: vertical-rl;

  transform: rotate(-180deg); 

 }

td {border:1px solid;}

<table id="tablepress-1" class="tablepress tablepress-id-1">

<tbody class="row-hover">

<tr class="row-1 odd">

 <td class="column-1"></td><td class="column-2"><span>Tickets Included</span></td><td class="column-3"><span>Best Seats</span></td><td class="column-4"><span>Parking at the Firehall Theatre</span></td><td class="column-5"><span>Tax Receipt Over Ticket Value</span></td><td class="column-6"><span>Repeat Visits</span></td><td class="column-7"><span>Voting Rights at the AGM</span></td><td class="column-8"><span>Playbill Listing</span></td><td class="column-9"><span>Page to Stage Events</span></td><td class="column-10"><span>Discounted Patron Rates for Additional Tickets</span></td><td class="column-11"><span>Complimentary Beverage on Opening Night</span></td><td class="column-12"><span>Front of the Line Access</span></td><td class="column-13"><span>Brochure Listing</span></td><td class="column-14"><span>Parking at the Springer Theatre</span></td><td class="column-15"><span>Invitation to First Day of Rehearsals</span></td><td class="column-16"><span>Monthly 'Insider's Group'</span></td><td class="column-17"><span>End of Season Dinner</span></td>

</tr>

<tr class="row-2 even">

 <td class="column-1">Visionary<br>

($10,000+)</td><td class="column-2">30</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14">•</td><td class="column-15">•</td><td class="column-16">•</td><td class="column-17">•</td>

</tr>

<tr class="row-3 odd">

 <td class="column-1">Champion<br>

($4,000-9,995)</td><td class="column-2">20</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14">•</td><td class="column-15">•</td><td class="column-16">•</td><td class="column-17">•</td>

</tr>

<tr class="row-4 even">

 <td class="column-1">Guardian<br>

($1,400-3,995)</td><td class="column-2">16</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14">•</td><td class="column-15">•</td><td class="column-16">•</td><td class="column-17"></td>

</tr>

<tr class="row-5 odd">

 <td class="column-1">Benefactor<br>

($690-1,399)</td><td class="column-2">10</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14"></td><td class="column-15"></td><td class="column-16"></td><td class="column-17"></td>

</tr>

<tr class="row-6 even">

 <td class="column-1">Partner<br>

($490-685)</td><td class="column-2">7</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11"></td><td class="column-12"></td><td class="column-13"></td><td class="column-14"></td><td class="column-15"></td><td class="column-16"></td><td class="column-17"></td>

</tr>

<tr class="row-7 odd">

 <td class="column-1">Supporter<br>

($390-485)</td><td class="column-2">5</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11"></td><td class="column-12"></td><td class="column-13"></td><td class="column-14"></td><td class="column-15"></td><td class="column-16"></td><td class="column-17"></td>

</tr>

</tbody>

</table>

Bootstrap 5 Vertical Alignment Bottom

Add both .mt-auto and .mb-0 to the paragraph. This sets bottom margin to 0 and top margin to auto getting as close as possible to the next element below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
  <h1>Hello World</h1>
  <p class="ms-auto mt-auto mb-0 small">Stupid Text</p>
</div>
<hr class="my-0">

CSS align vertical at bottom and center

try this :

#box {
    background:#6CCB61;
    position: relative;
}

#box span {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

https://jsfiddle.net/veefmgna/

bottom vertical align an h3 text with 100% height

This might do the trick.

For the following HTML:

<div>
    <h3>Kitchen Experiments</h3>
</div>

apply the following CSS:

div {
    border: 1px solid #666;
    height: 200px;
    text-align: center;
    width: 150px;
}

h3 {
    height: inherit;
    vertical-align: bottom;
    background-color: pink; /* optional to show extent of element */
    margin: 0;
    display: table-cell;
}
h3:after { /* trick to add bottom padding */
    content: '';
    display: block;
    height: 10px; 
}

Apply display: table-cell to h3 and inherit the height (instead of 100%).

The parent div is still a block element, so it will probably behave responsively (but you need to try this yourself).

If you need to control the bottom padding between the text and the parent block,
you can include the rule with the pseudo-element.

Demo: http://jsfiddle.net/audetwebdesign/RJ6YM/