Question

我试图按基线对一个页眉与一整套文本进行对齐,但这似乎令人惊讶地证明是困难的。我一直在玩弄不同的方法,但似乎找不到完美的解决办法。下面是下面我所行的一个例子:

“https://i.sstatic.net/4HekG.png' alt=“示例”/>

<h2>XxMmxX</h2>
<p class="right">
    I saw for the first time the earth s shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
</p>

样式 :

h2 {
    position: relative;
    font-size: 24px;
    line-height: 40px;
    text-align: right;
    width: 190px;
    top: 30px;
}
.right {
    margin-left: 200px;
    font-size: 14px;
    line-height: 20px;
}

我希望XxMxx的基线与案文的基线保持一致。

一些说明:

The header is right-aligned and has a fixed width
The header uses a bigger font-size than body
I want them to be perfectly aligned, this means not just setting a top of some px and having it almost aligned. (this page will be printed and this will definitely be noticeable)

Answer 1

尝试使用表格并使用 垂直对称: 基线;

Answer 2

Here is another solution, without a table: First I use a <div> instead of <p>:

<h2 class="left">XxMmxX</h2>

<div class="right">
    I saw for the first time the earth s shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
</div>

我用 float 将放在旁边。校对技巧是通过设置已知的字体大小来完成的, 如 1em 到到 <1.5em 到 . 。这样您需要以已知的数量向下移动。向下移动是使用 position/top (您也可以使用边框) 。这里是:



.left {
  float: left;
  font-size: 1.5em;

}

.right {
  font-size: 1em;
  float: left;
  width: 20em;  
  position: relative;
  top: 0.5em;
  margin-left: 10px;
}

Answer 3

我可能有些东西接近了。这里是jsfidle 。

HTML :

<span class="textblock">
  <h2>XxMmxXx</h2>

  <span class="right">
    I saw for the first time the earth s shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
  </span>

</span>

CSS :

.textblock {
  float: left;
  line-height: 1em;
}

h2 {
  font-size: 1.5em;
  display: inline-block;
}

.right {
  display: inline-block;
  font-size: 1em;
  width: 15em;
  vertical-align: text-top;
  margin-left: 30px;
}

似乎 垂直对齐: text-top 可能是你想要的, 但要求所有东西都内嵌。与 display: inline- block 相结合, 你也许可以找到接近你需要的东西。您可能需要与 < code> 类的宽度和边距调和。 right 类的宽度和边距。要适应您的布局, 您可能需要与该类的宽度和边距调和。



希望这有帮助。

Answer 4

您不必使用表格布局, 也不必使用 < code> 垂直对齐 < / code> 。设置两个元素使用相同的 < code> line- leight 和对齐元素的顶部。如果您重新选择让文本停留在基准线上, 请使用 < code> 位置: relational; 上方 : FOOpx 将文本上下移动。

友情链接