基线垂直对齐，但在顶部

Question

I'm trying to get a vertical alignment similar to baseline, but at the first line of text rather than the last. Neither top nor text-top gets the alignment right. Any ideas? Thanks!

edit: This assumes that the font size is the same in the elements being aligned. See comment below by @FelipeAls on the accepted answer .

edit: now with code sample and picture :

What I'm trying to do is vertically align the text in several inline-block elements so that their baselines are all in the same position. I'd rather not do something like nudging things using margins and padding, because I find whenever I do that, I ended up playing whack-a-mole with the different browsers.

HTML:

<div class="foo">
    <span>one</span>
    <span>two two two two</span>
    <span>three three three three three three three three three</span>
    <button type="button">action</button>
</div>

<div class="bar">
    <span>one</span>
    <span>two two two two</span>
    <span>three three three three three three three three three</span>
    <button type="button">action</button>
</div>

CSS:

body {
    font-family: sans-serif;
    font-size: 12px;
}

button {
    font-family: inherit;
    font-size: inherit;
}

div {
    position: relative;
    width: 500px;
    text-align: center;
}

div.foo, div.bar {
    margin-bottom: 2em;
}

div span {
    text-align: center;
}

div.foo span {
    display: inline-block;
    width: 50px;
    vertical-align: top;
}

div.bar span {
    display: inline-block;
    width: 50px;
    vertical-align: baseline;
}

div button {
    display: inline-block;
    width: 125px;
}

See http://jsfiddle.net/don01001100/3t8v5L1j/3/ .

Answer 1

I'm afraid that you can only do that with CSS box-model, such as margin , padding .

This is because the different inline-block elements are aligned at the baseline, but they have different padding / margin settings, so their text is aligned slightly off vertically. If you change the padding and margin of the <button> s and the <span> s to be the same, then it should work.

---

EDIT1

Actually, now that I think of it, you might be able to manually set values to vertical-align in pixels. Experiment with it (including negative values) to see what you want. It will depend on the padding s and margin s of the <span> s and <div> s.

---

EDIT2

Actually, vertical-align: text-top works pretty well for me: