如何在基线上定位文本？

Question

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 */
}

结果：

您如何定位文本，使其基线（“Hello”的底部）与粉红色框的底部对齐，即：

无论font-size是什么，都有办法实现这个目标吗？

PLAYGROUND HERE

Answer 1

在搜索...并搜索之后，我想出了如何将文本与元素基线对齐的非常棒tutorial at adobe's place。

使用PSEUDO-ELEMENT

我会建议这个，但看看下面的所有故事（从.strut元素到单个伪元素的道路）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用额外的.STRUT元素

• 情景和规则

规则1（较大字体）：我们希望div的高度是固定的。例如20px。因此，font-size必须等于或小于.height值，以便工作。通常，

〜前面的尺寸必须与固定高度相等或相当。它适用于所有尺寸较小的尺寸

场景1 ：假设我们的字体大于此案例的20px。

查看实际操作： http://jsfiddle.net/csdtesting/pvw5xhku/

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

• 的说明

关于此实现的所有魔力都与.strut element有关。这是具有display:inline-block;属性的那个！ 我想知道......又是什么？！

支柱的基线位于其下边缘，这在这种情况下仅由支柱的高度决定。如果字母跨度的行高小于支柱的高度，则字母的基线将移动以匹配！的难以置信！

• 主要实施

查看实际操作： http://jsfiddle.net/csdtesting/bm2yz3ec/

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

是的，在某种程度上：您可以使用line-height和其他属性的组合操作文本的位置，包括设置边距和填充，或使用position: relative和{{1} }。如果你只有一条线需要定位，还有其他技巧（例如，如果你要创建一个下限）;我将介绍适用于一行和多行的定位技术。

有一个相当大的警告，类型渲染在操作系统和浏览器之间有所不同，并且很难精确控制文本，特别是如果你想要像素完美控制。

默认情况下，浏览器将文本大致位于行的中间，由行高定义。浏览器之间没有定义的文本基线是不变的，因此浏览器之间的定位会有所不同。

设置垂直节奏时的想法是让所有文字都以一定的间隔落下。要做到这一点，您需要控制字体大小（大多数人都会这样做），行高，以及为您的设计添加垂直空间的任何内容：边框，填充和边距。您选择“节奏单位” - 在您的情况下，20px - 然后设置您的文本以与其对齐。你的行高应该等于你的节奏单位（即20px）;对于较大的字体大小，使用多个节奏单位（例如40px，60px）以确保文本保持节奏。边框，填充和边距的组合应该加到你的节奏单位，以保持一切。

我做了以下JS Fiddle来说明下一段代码。

如前所述，浏览器将文本垂直居中（-ish），因此它不能很好地放在网格上;使用不同的字体大小时，文本基线会移动。以下是处理这个问题的几种方法。

以下是我们的示例HTML：

top

我们将给它以下基本的CSS：

<article>
  <section>
    <h2>Title!</h2>
    <div class="first">Hello g World<br />Lorem ipsum...</div>
    <div class="second">Hello g World<br />Lorem ipsum...</div>
    <div class="first">Hello g World<br />Lorem ipsum...</div>
  </section>
</article>

使用article { margin: 0; padding: 0; line-height: 20px; /* 20px is our "unit of rhythm" */ } div { margin: 20px; } h2 { font-size: 24px; line-height: 40px; /* double our rhythm unit */ } .first { font-size: 16px; } .second { font-size: 30px; line-height: 40px; /* double our rhythm unit */ } 和position: relative：

通过相对于背景网格定位文本来可视地对齐文本。

为top元素提供类section并添加以下CSS：

rel

JS Fiddle - 页面的一半

这会将文本从其自然位置向下推。不幸的是，这种对齐必须由眼睛和是的，它确实因浏览器而异。页面通常内部一致 - 即。文本与网格对齐，即使在某些浏览器中它们均匀地高出几个像素。

使用.rel, .rel .first, .rel .second { position: relative; } .rel .first { top: 4px; } .rel .second { top: 9px; } 和/或padding

顶部和底部填充的总和必须等于我们的节奏单位。同样，对齐必须由眼睛完成，并且可能在浏览器之间有所不同。

margin

JS Fiddle - 滚动到底部

您也可以使用边距，但必须注意折叠边距以确保节奏保持不变。

这是建立垂直节奏的几种方法的告密者指南。我已经略过了细节，所以我建议你在网上阅读这篇文章 - great article about vertical rhythm at 24ways和A List Apart的另一个好文章。还有一些垂直节奏生成器可以阻止你做太多的像素摆弄自己。

Answer 3

尝试添加line-height属性：

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

更新

将height和line-height设置为相同的值会按中心垂直对齐文字：

JSBIN

如果您只使用可能足够的16px和30px。如果您需要使用它来处理所有值，我建议您使用另一种布局，如下所示：

<div class="container">
  <span class="align-bottom">Hello g world</span>
</div>

Answer 4

我不认为这是一个CSS属性，我不认为你可以通过编程方式确定它。

但是，您可以使用JavaScript调整div的高度，假设基线上方的字体部分大约为。 80％：

var d = document.getElementsByTagName('div');
for(var i = 0 ; i < d.length ; i++) {
  d[i].style.height= d[i].offsetHeight*0.8+'px';
}

首先删除硬编码的div样式高度。

小提琴： http://jsfiddle.net/38eLft8q/1/

Answer 5

有点棘手，也许不是防弹，但到目前为止：

<强> HTML

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

<强> CSS

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

div:before {
   content: attr(title);
   position: absolute;
   bottom: -0.24em;
}

.first {
  font-size: 10px;
}

.second {
  font-size: 16px;
}

JSBIN

感谢您的挑战：）

更新

如果问题结构没有变化，我们将保留div的文字：

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

和一些小的javascript将创建标题

var divs = document.getElementsByTagName("div"); 

for (var i = 0; i < divs.length; i++) {  

    var txt = divs[i].innerHTML;
    divs[i].setAttribute('title', txt);

}

最后一些css改变

div {
  background-color: rgba(255, 0, 0, 0.3);
  margin-top: 50px;
  height: 20px; /* This is fixed! */
  text-indent: -9999px;
  position: relative;
}

div:before {
   content: attr(title);
   text-indent: 9999px;
   position: absolute;
   bottom: -0.24em;
}

JSBIN

如果我们可以改变

的结构

<强> HTML

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

<强> CSS

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

div span {
   position: absolute;
   bottom: -0.24em;
}

JSBIN

注意：

• 未检查不同的字体，但我认为只是计算 底部。