CSS 垂直对齐基线 HTML 标题 [英] CSS Vertical Align Baseline HTML Headings

问题描述

我有两列标题要与基线对齐，它们都是不同的字体大小.除此之外，我想要一个在左侧，一个在右侧.

如果您使用 display: inline-block 它们将与基线对齐，而不管最大宽度.

HTML:

<div class="headings-position"><h2 class="左标题">标题</h2><h3 class="right sub-heading">带有长文本的标题&东西

CSS:

h2,h3 {边距:0；显示:内联块；位置:相对；}h2{左:0；底部:0}h3{最大宽度:100px；右:0；底部:0；文本对齐:右；}.headings {位置:相对；高度:200px；宽度:500px；边距:0 自动；边框:1px 实心 #000；}

小提琴:http://jsfiddle.net/qgjttauq/

解决方案

你需要对 h2 使用 float: left 而不是 left: 0 和 float: right for h3 而不是 right: 0.

小提琴

I have two columns of headings that I want to align to the baseline which are both different font-sizes. In addition to this I want one on the left side and one on the right side.

If you use display: inline-block they are aligned to the baseline, regardless of the max-width.

HTML:

<div class="headings interior">
    <div class="headings-position">
        <h2 class="left heading">Heading</h2>
        <h3 class="right sub-heading">Heading with long text & Stuff</h3>
    </div>
</div>

CSS:

h2,h3 {
    margin: 0;
    display: inline-block;
    position: relative;
}
h2 {
    left: 0;
    bottom: 0
}
h3 {
    max-width: 100px;
    right: 0;
    bottom: 0;
    text-align:right;
}
.headings {
    position: relative;
    height: 200px;
    width: 500px;
    margin: 0 auto;
    border: 1px solid #000;
}

Fiddle: http://jsfiddle.net/qgjttauq/

解决方案

You need to use float: left for h2 instead of left: 0, and float: right for h3 instead of right: 0.

Fiddle

这篇关于CSS 垂直对齐基线 HTML 标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！