將一些元素與基線對齊並將其他元素與底部對齊

我試圖將兩個不同字體大小的文本元素對齊到彼此的基線，而且還將同一行中的圖像與其底部對齊。我遇到的問題是，如果只有一個存在整體對齊更改，這會在使用javascript添加和刪除元素時導致出現不和諧的效果。將一些元素與基線對齊並將其他元素與底部對齊

我想設置它，以便每個元素的底線與其底部之間的距離相同，以便哪種元素與圖像共享線並不重要。也許有一些預處理可以根據行高和字體大小來計算字體的基線？

.line { 
    font-size: 15px; 
} 
.line > span { 
    background: #ccc; 
    display: inline-block; 
    line-height: 30px; 
    vertical-align: baseline; 
} 
.line > .b { 
    font-size: 30px; 
} 
img { 
    height: 50px; 
    vertical-align: bottom; 
    width: 50px; 
}

這是jsfiddle that demonstrates the problem。

來源

2014-10-06 theazureshadow

看看顯示：表單元格並顯示：錶行。這對於這種事情是很好的。更新的小提琴：http://jsfiddle.net/k48muk5e/2/ – arlg 2014-10-06 23:06:54

如果我理解正確你的問題，你只需要包括：（我做它通過這裏的跨度標籤，因爲這似乎是你試圖做）vertical-align:bottom;爲您的文本：

.line > span { 
    background: #ccc; 
    display: inline-block; 
    vertical-align: bottom; 
}

來源

2014-10-06 23:09:36 Enigmadan

我希望文本的基線也是一致的。 – theazureshadow 2014-10-06 23:34:50

@theazureshadow你確定嗎？具有對齊基線的不同大小的字體看起來很好，很奇怪。這裏有三個基於你的代碼的不同的小提琴。他們中的任何一個看起來像你想要的？ http://jsfiddle.net/k48muk5e/19/（所有底部匹配），http://jsfiddle.net/k48muk5e/20/（文本基線匹配和圖像位於文本底部），http://jsfiddle.net/k48muk5e/21 /（文本基線匹配和圖像匹配父文本的底部）。 – Enigmadan 2014-10-06 23:46:49

@theazureshadow我認爲重要的是要注意的是，「基線」是文本的底部，而不考慮諸如p和q等字符低於基線的字符。 – Enigmadan 2014-10-06 23:49:48

如果添加：

.line * { vertical-align: bottom; }

，並刪除斷了線的位置>跨度

.line > span { 
    background: #ccc; 
}

這將所有元素都對齊到底，是你想要的嗎？

來源

2014-10-06 23:24:56 Dabrowski

不可以。基本上，我希望文本的基線和文本元素的底部之間的距離相同。如果這是真的，那麼我可以使用'vertical-align：bottom'對齊所有東西。 – theazureshadow 2014-10-06 23:35:43

不確定你想要什麼。也許你可以將它們顯示爲內嵌塊並使用底部邊距進行間隔？如果字體大小是可變的，則在'em'中指定它，並且它將縮放到字體大小。 – Dabrowski 2014-10-07 00:29:23

你能提供一個你想要實現的圖像嗎？ – Dabrowski 2014-10-07 00:30:19

如果我理解正確，你想實現什麼，只是招行的高度，以.line區段：

div { 
    margin: 10px 0; 
} 
.line { 
    font-size: 15px; 
    line-height: 30px; 
} 
.line > span { 
    background: #ccc; 
    display: inline-block; 
    vertical-align: baseline; 
} 
.line > .b { 
    font-size: 30px; 
} 
img { 
    height: 50px; 
    vertical-align: bottom; 
    width: 50px; 
}

來源

2014-10-06 23:41:05 moonfly

將一些元素與基線對齊並將其他元素與底部對齊

回答

相關問題