How to Make Text Run Top-To-Bottom in CSS

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>

How to write vertical text from bottom to top without using transform rotate?

I combined writing-mode and rotation:

    .rotated {

        writing-mode: tb-rl;

        transform: rotate(-180deg);

    }

<div class="rotated">Text from bottom with working width/height</div>

Aligning text vertically from top to bottom HTML5 CSS3

Use text-orientation: upright; this will solve the problem.

.topdown-button{    

    max-height: 150px;

    min-height: 150px;

    width: 60px;

    border: 3px solid navy;

    vertical-align: top;

    display:block;

}

.topdown-button div{  

    text-transform: uppercase;

    vertical-align:top;

    font-size:18px;

    min-height: 148px;

    position:relative;

    text-align:left;

    -ms-writing-mode: tb-rl;   

    -webkit-writing-mode: vertical-rl; 

    -o-writing-mode: vertical-rl;        

    writing-mode: vertical-rl;

    text-transform:uppercase;    

    font-size-adjust:0.5;

    text-orientation: upright;

}

<button class="btn btn-primary topdown-button">

    <div>お客様</div>

</button>

<button class="btn btn-primary topdown-button">

    <div>Basic 2</div>

</button>

css text orientation vertical but like writing bottom up

You can try use transform and rotate

.word {
  margin: 50px -30px;
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  background-color: whitesmoke;
  width: 100px;
  text-align: center;
}

<div class="word">hello world</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>

get text-bottom on same vertical position no matter text size

Positioning is from the edges of the element. You can't really position from the inner text's baseline but you can fake it by taking the font-height into account. (Though different fonts have different ideas of how baseline and font-height are related so this may not work if using different fonts in each spot.)

(calc() isn't necessary but is used here to illustrate the math.)

.container {
  position: relative;
  width: 300px;
  height: 100px;
}
.topright {
  position: absolute;
  top: calc(20px - 8px);
  right: 16px;
  font-size: 8px;
}
.topleft {
  position: absolute;
  top: calc(20px - 28px);
  left: 16px;
  font-size: 28px;
}
.bottomright {
  position: absolute;
  top: calc(100px - 28px);
  right: 16px;
  font-size: 28px;
}
.bottomleft {
  position: absolute;
  top: calc(100px - 18px);
  left: 16px;
  font-size: 18px;
}

<div class="container">
  <div class="topleft">Top Left</div>
  <div class="topright">Top Right</div>
  <div class="bottomleft">Bottom Left</div>
  <div class="bottomright">Bottom Right</div>
</div>

How to moving top line to the bottom of the text in css

Here is a working snippet with comments:

/* Added */

.content_section.with_border {

  position: relative;

}

.content_section.with_border:before {

  content: "";

  width: 10%;

  display: block;

  height: 2px;

  left: 0;

  bottom: -4px; /* modified top -> bottom, value can be modified to adjust position */

  position: absolute;

  background: #1d1b22;

  clear: both;

}

.content_section.with_border .label {

  position: relative;

  clear: both;

}

h1,

h2 {

  font-weight: 800;

  font-size: 1.60714em;

  line-height: 1.24444em;

  margin: 0 0 .64286em;

}

.content_section.with_border .content {

  padding: 0 11%;

  clear: both;

}

.content_section .label {

  font-size: .5em;

  text-transform: uppercase;

  font-weight: 800;

}

<section id="intro" class="workhide">

  <div class="content_section with_border">

    <div class="content"><span class="label">Werk</span>

      <h1>

        Zo trots als een hond met zeven staarten. <br> Ben ik op mijn werk. Denk jij nu: 'Dat wil ik ook!'?<br> mail mij!

      </h1>

    </div>

  </div>

</section>

How to I move text to the bottom of in an image overlay for card in CSS/HTML?

Remove styles of .img-overlay .plus:

.overlay.overlay-sm .shape {
  filter: brightness(0) invert(1);
  opacity: 0.15;
  height: 40px;
}

.overlay.overlay-sm .shape.wave {
  height: initial;
  width: 70px;
}

.overlay.overlay-sm .shape.xshape {
  height: 30px;
}

.portfolio .square {
  top: 28%;
  left: 20%;
}

.portfolio .circle {
  top: 8%;
  right: 35%;
}

.portfolio .triangle {
  top: 10%;
  right: 4%;
}

.portfolio .half-circle1 {
  bottom: 13%;
  left: 5%;
}

.portfolio .half-circle2 {
  bottom: 35%;
  left: 20%;
}

.portfolio .xshape {
  bottom: 10%;
  left: 8%;
}

.portfolio .wave {
  bottom: 38%;
  left: 6%;
}

.grid {
  width: 100%;
  margin: 1.5rem 0;
}

.grid-item {
  width: 33.33%;
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: center;
}

.gallery-image {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  height: 330px;
  width: 100%;
  cursor: pointer;
  /* justify-content: flex-end; */
}

.gallery-image img {
  position: absolute;
  height: 115%;
  width: initial;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  /* justify-content: flex-end; */
  /* cursor: pointer; */
}

.gallery-image .img-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: auto;
  z-index: 2;
  color: var(--light-one);
  background-color: rgba(120, 76, 251, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 3.2rem;
  /* opacity: 0; */ /* I removed this one :: Rickard */ 
}

.plus:before,
.plus:after {
  content: "";
  position: absolute;
  width: 4.5rem;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--light-one);
  border-radius: 3px;
}

.plus:before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.img-description {
  width: 100%;
}

.img-overlay h3 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.img-overlay h5 {
  font-size: 1.15rem;
  font-weight: 300;
}

.gallery-image:hover .img-overlay {
  opacity: 1;
  transition: 0.3s ease;
}

.gallery-image:hover img {
  transform: translate(-50%, -50%) scale(1.1);
}

.more-folio {
  display: flex;
  justify-content: center;
}

<div class="grid-item logo-design">
  <div class="gallery-image">
    <img src="https://source.unsplash.com/random/300x200" alt="Sample Image">
    <div class="img-overlay">
      <div class="plus">
        <div class="img-description">
          <h3>Logo Design</h3>
          <h5>View Demo</h5>
        </div>
      </div>
    </div>
  </div>
</div>