如何在基线上定位文本？ [英] How to position text on a baseline?

问题描述

解决方案

搜索...和搜索后，我想出了这个非常真棒

  div.forall {width：300px; height：20px;边框：细黑色固体; background-color：＃9BBCE3; margin：10px;}。inText {font-size：20px; line-height：20px;}。intext2 {font-size：9px; line-height：9px;}。strut {height：20px; display：inline-block;}  

 < div class = forall> < div class =inText> Hello g World / With font-size 20px< div class =strut>< / div& < / div>< / div>< div class =forall> < div> Hello g World / Without font-size< div class =strut>< / div> < / div>< / div>< div class =forall> < div class =intext2> Hello g World / with font-size：9px< div class =strut>< / div> < / div>< / div>  

=https://i.stack.imgur.com/WA6Hb.jpgalt =输入图片说明here>>

PLAYGROUND HERE

HTML:

<div class="first">Hello g World</div>
<div class="second">Hello g World</div>

CSS:

div {
  background-color: rgba(255, 0, 0, 0.3); /* For visualization only */
  margin-top: 50px;                       /* For visualization only */
  height: 20px;                           /* This is fixed! */
}

.first {
  font-size: 16px;                        /* This can change */
}

.second {
  font-size: 30px;                        /* This can change */
}

Result:

How would you position the text such that its baseline (the bottom of "Hello") is aligned with the bottom of the pink box, i.e.:

Is there a way to achieve this regardless of the font-size?

PLAYGROUND HERE

解决方案

After searching ...and searching I came up with this very awesome tutorial at adobe's place about how to align text to baseline of an element.

USING PSEUDO-ELEMENT

I would suggest this one but take a look at all the story bellow (Road from .strut element to a single pseudo-element):

div {
  width: 400px;
  height: 100px;
}
.first {
  font-size: 24px;
  background-color: #9BBCE3;
}
.first::after {
  content: "";
  height: 100%;
  display: inline-block;
}

<div>
  <div class="first">Hello g World / With font-size: 24px</div>
</div>

USING AN EXTRA .STRUT ELEMENT

• SCENARIOS AND RULES

Rule 1 (Larger Fonts): We want the height of the div to be fixed. For example 20px. So, the font-size must be equal or less to the .height value so as to work.In general,

~ THE FONT-SIZE MUST BE EQUAL OR LESS THAN THE FIXED HEIGHT.THEN IT WORKS FOR ALL SIZES WITH LESS VALUES

Scenario 1: Suppose that we have larger fonts than the 20px of this case.

See it in action: http://jsfiddle.net/csdtesting/pvw5xhku/

div.forall {
  width: 700px;
  height: 48px;
  border: thin black solid;
  background-color: #9BBCE3;
  margin-top: 20px;
}
.inText {
  font-size: 48px;
  line-height: 48px;
}
.inText3 {
  font-size: 22px;
  line-height: 22px;
}
.strut {
  height: 48px;
  display: inline-block;
}

<div class="forall">
  <div class="inText">Hello g World /With font-size 46px
    <div class="strut"></div>
  </div>
</div>
<div class="forall">
  <div class="inText2">Hello g World /With font-size 32px
    <div class="strut"></div>
  </div>
</div>
<div class="forall">
  <div class="inText3">Hello g World /With font-size 32px
    <div class="strut"></div>
  </div>
</div>

• EXPLANATION

All the magic about this implementation is about the .stut element.This is the one with display:inline-block; property! I wondered ...what is that again ?!

The baseline of the strut is placed at its bottom margin edge, which is determined solely by the height of the strut in this case. And if the letter span’s line-height is smaller than the strut’s height, the letter’s baseline will move to match! Unbelievable!

• MAIN IMPLEMENTATION

See it in action: http://jsfiddle.net/csdtesting/bm2yz3ec/

div.forall {
  width: 300px;
  height: 20px;
  border: thin black solid;
  background-color: #9BBCE3;
  margin: 10px;
}
.inText {
  font-size: 20px;
  line-height: 20px;
}
.intext2 {
  font-size: 9px;
  line-height: 9px;
}
.strut {
  height: 20px;
  display: inline-block;
}

<div class="forall">
  <div class="inText">Hello g World /With font-size 20px
    <div class="strut"></div>
  </div>
</div>
<div class="forall">
  <div>Hello g World / Without font-size
    <div class="strut"></div>
  </div>
</div>
<div class="forall">
  <div class="intext2">Hello g World / with font-size:9px
    <div class="strut"></div>
  </div>
</div>

这篇关于如何在基线上定位文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！