字體大小改變元素的位置

HTML：

<button>A</button> 
<button>B</button> 
<button class="special">C</button> 
....

CSS：

button { 
    background-color: grey; 
    color: #fff; 
    border: none; 
    border-radius: 2px; 
    box-shadow: 1px 1px 0 0.8px #C0CBD1; 
    height: 30px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 30px; 
    font: 500 16px/36px sans-serif; 
} 

.special { 
    font-size: 30px; 
}

jsfiddle

現在我做了什麼是特殊按鈕有更大的字體大小。奇怪的是，增加font-size將此按鈕向上移動。我想這是大家很邏輯，但無法找到解釋

來源

2015-01-26 Jeanluca Scaljeri

Vertical-align http://jsfiddle.net/q640e8sc/1/ ....因爲默認值基準是基於在文本上。 – DaniP 2015-01-26 19:52:49

解釋是按鈕是內聯元素，而按鈕中的文本決定了垂直對齊。

內聯元素的默認垂直對齊方式是將字符的底部放在文本的基線上。如果您查看示例中的按鈕，則會看到字符的底部完全對齊。

如果添加按鈕周圍一些文本，您將看到按鈕的文本與按鈕外的文本對齊：http://jsfiddle.net/Guffa/q640e8sc/4/

如果指定的按鈕不同的中古立式排列，它們將以不同的排隊。例如，如果使用vertical-align: middle;，按鈕將排列在字符的中心，因此按鈕的邊緣將排齊：http://jsfiddle.net/Guffa/q640e8sc/5/

另一種避免該對齊的方法是使按鈕塊元素使用float: left;。這使按鈕排隊，但它當然會使按鈕對周圍元素的反應不同：http://jsfiddle.net/Guffa/q640e8sc/6/

來源

2015-01-26 20:01:26 Guffa

使用垂直對齊（這應該幫助我解決這當然！）：

button { 
    background-color: grey; 
    color: #fff; 
    border: none; 
    border-radius: 2px; 
    box-shadow: 1px 1px 0 0.8px #C0CBD1; 
    height: 30px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 30px; 
    font: 500 16px/36px sans-serif; 
    display: inline-block; 
    vertical-align: top; 
} 

.special { 
    font-size: 30px; 
    display: inline-block; 
    vertical-align: middle; 
}

demo

並對齊文本在中間，你可以使用行高。 demo

來源

2015-01-26 19:53:55

字體大小改變元素的位置

回答

相關問題