базовый вертикальный выровнять, но вверху

Question

Я пытаюсь получить вертикальное выравнивание, подобное исходной, но в первой строке текста, а не в последней. Ни top, ни text-top не получают право выравнивания. Есть идеи? Благодаря!

Редактировать: Это предполагает, что размер шрифта одинаков для выравниваемых элементов. См. Комментарий ниже от @FelipeAls о принятом ответе.

изменения: теперь с образцом кода и изображения:

То, что я пытаюсь сделать, это вертикально выровнять текст в нескольких рядный блочных элементов, так что их исходные условия все в том же положении. Я бы предпочел не делать что-то вроде подталкивания вещей, используя поля и отступы, потому что я нахожу каждый раз, когда я это делаю, в итоге я играл с разными браузерами.

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

http://jsfiddle.net/don01001100/3t8v5L1j/3/ См.

Answer 1

Боюсь, что вы можете сделать это только с помощью CSS-модели, например margin, padding.

Это связано с тем, что различные элементы встроенного блока выровнены по базовой линии, но у них разные настройки padding/margin, поэтому их текст слегка выровнен по вертикали. Если вы меняете padding и margin<button> s и <span> s должны быть одинаковыми, тогда это должно сработать.

---

EDIT1

На самом деле, теперь, когда я думаю об этом, вы можете быть в состоянии вручную установить значение vertical-align в пикселях. Поэкспериментируйте с ним (включая отрицательные значения), чтобы увидеть, что вы хотите. Это будет зависеть от padding s и margin s от <span> s и <div> s.

---

EDIT2

На самом деле, vertical-align: text-top работает довольно хорошо для меня: