为什么空按钮不与里面有文本的按钮垂直对齐? [英] Why an empty button does not align vertically with one that has text inside?

问题描述

我有一个带按钮的工具栏，有些里面有文字，有些没有.出于某种原因，我不太明白，它们没有垂直对齐.

为什么?以及如何修复它?

#tools{边框:1px纯黑色；}#工具按钮{边框宽度:2px；边框样式:一开始；边框颜色:#ccc；高度:24px；宽度:24px；字体大小:9pt；}#工具按钮:活动{边框样式:插入；}按钮.Bl{字体粗细:粗体；}按钮.Bo{字体样式:斜体；}按钮.B4{背景色:#A00；文本阴影:0.15em 0.15em #2A0000；}按钮.Bc{背景色:#F55；文本阴影:0.15em 0.15em #3F1515；}

<button class="B4 Pallete" title="§4 深红色"></button><button class="Bc Palele" title="§c Red"></button><button class="Bl Pallete" title="§r Bold">B</button><button class="Bo Pallete" title="§r斜体">I</button>

您需要仔细阅读这些部分以理清其中的含义.

查看演示:http://jsfiddle.net/audetwebdesign/0jm8th00/

I have a toolbar with buttons, some have text in them and others don't. For some reason I don't really understand, they don't vertically align.

Why? and how to fix it?

#tools{
   border: 1px solid black; 
}

#tools button{
    border-width: 2px;
	border-style: outset;
	border-color: #ccc;
    
	height: 24px;
	width: 24px;
    
	font-size: 9pt;
}
#tools button:active{
	border-style: inset;
}

button.Bl{
    font-weight: bold;
}
button.Bo{
    font-style: italic;
}
button.B4{
    background-color: #A00;
    text-shadow: 0.15em 0.15em #2A0000;
}
button.Bc{
    background-color: #F55;
    text-shadow: 0.15em 0.15em #3F1515;
}

<div id="tools">
    <button class="B4 pallete" title="§4 Dark Red"></button>
    <button class="Bc pallete" title="§c Red"></button>
    <button class="Bl pallete" title="§r Bold">B</button>
    <button class="Bo pallete" title="§r Italic">I</button>
</div>

http://jsfiddle.net/hjo41wm2/

解决方案

Vertical alignment of inline elements - why this works the way it does.

Suppose that we have the following HTML (similar to the above):

<div id="tools">
    <button class="ExA pallete" title="Example Auto">E</button>
    <button class="Ex0 pallete" title="Example Zero">E</button>
    <button class="B4 pallete" title="§4 Dark Red"></button>
    <button class="Bc pallete" title="§c Red"></button>
    <button class="Bl pallete" title="§r Bold">B</button>
    <button class="Bo pallete" title="§r Italic">I</button>
</div>

I added two more buttons to illustrate a few concepts.

Let's look at the following CSS rules:

#tools{ border: 1px solid black; }

button{
    border-width: 2px;
    border-style: outset;
    border-color: #ccc;

    height: 48px;
    width: 48px;

    font-size: 24pt;
    vertical-align: baseline;
}
button:active{
    border-style: inset;
}

button.Bl { font-weight: bold; }
button.Bo { font-style: italic; }
button.B4{
    background-color: #A00;
    text-shadow: 0.15em 0.15em #2A0000;
}
button.Bc{
    background-color: #F55;
    text-shadow: 0.15em 0.15em #3F1515;
    height: auto;
}
button.ExA {}
button.Ex0 {
    height: auto;
    font-size: 0;
}

Here we have six inline elements, all buttons, forming a line box, shown below:

The browser will compute a height for each inline element and then use the vertical alignment property (baseline by default) to align them with respect to each other.

In the case of the first two boxes and the last two boxes, there is a character content with a specified font-size, 24pt in this example (exept for the 0pt one, which I will explain shortly).

In this case, the 1st, 5th and 6th boxes behave as expected, the three letters are aligned vertically to a common baseline.

The 3rd and 4th buttons do not have a character, so the height of the inline box computes to zero (line-height only applies to text). In the 3rd button, the button has a fixed height so the browser vertically aligns the element to the baseline such that the half the height is above the baseline and half below. This is more obvious if you set height: auto for the 4th button, which will shrink the element to zero height (except for the borders) and we see that the 0+margin element aligns with the common baseline.

To confirm the behavior, consider the 2nd button, which has a character, and height: auto and font-size: 0. In this case, the zero font-size forces the inline box height to shrink to zero, and the height shrinks to zero (and border widths).

So, a button with no text is equivalent to a button with text displayed with a zero font height.

All of this behavior is implied by the CSS specification:

http://www.w3.org/TR/CSS2/visudet.html#line-height

You need to read the sections carefully to tease out the implications.

See demo at: http://jsfiddle.net/audetwebdesign/0jm8th00/

这篇关于为什么空按钮不与里面有文本的按钮垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！