-1

Is it possible to position single-line text element inside div so, that its baseline coincides with bottom border of div precisely. Just like in svg rect. I can do it manually, but it would be fine to have universal method for any font-size. Some shift measured in 'em' units maybe?

Now i do something like this to align text in two div's ('name' and 'start'), font-sizes are different and horizontal alignments are different, i want them to align vertically precisely not by manual tuning of bottom margin:

.project-div .footer {
  position: absolute;
  bottom: 0px;

  height: 28px;
  width: 100%;

  display: inline-block;
  line-height: 28px;
}

.project-div .footer .name {
  position: absolute;
  left: -1px;
  bottom: -20%;

  line-height: 28px;
  font-size: 28px;
  height: 28px;
}

.project-div .footer .start {
  position: absolute;
  right: -3px;
  bottom: -10%;

  line-height: 18px;
  font-size: 18px;
  height: 18px;

  font-family: "Arial Black";
  color: #ccc;
}
a1rgus
  • 1
  • 1

1 Answers1

0

I would say, assign the property position: relative to your parent, and then assign the properties position: absolute and bottom: 0 to your child if you want to completely have it at the bottom of the parent div.

Next time elaborate on your questions a bit more by the way.

CristianHG
  • 442
  • 5
  • 16
  • so i`ll get aligned bottomlines of two div's, but I want to align baselines, they are at different heights for different font-sizes – a1rgus Nov 06 '16 at 03:04
  • Would you mind posting a screenshot of what you currently have? – CristianHG Nov 06 '16 at 03:04
  • http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/ Try taking a look at this article – CristianHG Nov 06 '16 at 03:12
  • screenshot: https://yadi.sk/d/t07OUukDy9DJK 'timeline' and '2012' are manually aligned but not precisely. thanks for link i'll try it later – a1rgus Nov 06 '16 at 03:17