Vertically Align Text to The Bottom of The Box

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>

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>

How do I vertically center text with CSS?

You can try this basic approach:

div {  height: 100px;  line-height: 100px;  text-align: center;  border: 2px dashed #f69c55;}

<div>  Hello World!</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>

How to align Text to Top, Bottom and Center Vertically in Jetpack Compose?

You have to use a parent container and align the composable inside it.

For example a Box:

Box( 
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Center
) {
    Text(
        text = "Text",
    )
}

or a Column:

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "Text",
    )
}

Vertical align bottom divs with text of different sizes

You can use:

align-items: baseline;

Using a value like baseline allows the items to be aligned such as their baselines align.

As Mozilla Developers Networks describes align-items: baseline; :

The baselines (leading edge or trailing edge depending on the
flex-direction property) of all flex items are aligned with each
other. The flex item that occupies the most space, perpendicular to
the layout axis, follows the flex-start rule. The baselines of all
remaining elements are then aligned with the baseline of this element.

DEMO http://jsfiddle.net/a_incarnati/aegh74dr/2/

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/

Is it possible to vertically align text in a div with `display: -webkit-box;`

The following statement works for me:

-webkit-box-align: center;

https://jsfiddle.net/awt39v5s/1/

For the "old" flexbox definition, https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/ is a good resource.

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>

---

Related Topics