垂直对齐
vertical-align
用于对齐内联元素。这些是具有以下 display
属性的元素:
inline
inline-block
inline-table
(此答案不予考虑)
内联元素在一行中相邻排列。当元素多于当前行所能容纳的数量时,将在其下方创建一个新行。所有这些行都有所谓的行框,它围绕其行的所有内容。不同大小的内容意味着不同高度的行框。
在以下插图中,行框的顶部和底部由红线表示。
![enter image description here](https://istack.dev59.com/AWxvil.webp)
在这些行框内,属性vertical-align
负责对齐各个元素。
基线
垂直对齐最重要的参考点是涉及元素的基线。在某些情况下,元素的包含框的顶部和底部边缘也很重要。
内联元素
![enter image description here](https://istack.dev59.com/FBaeNl.webp)
行高的顶部和底部边缘由红线表示,字体高度由绿线表示,基线由蓝线表示。
在左侧,文本的行高设置为与字体大小相同的高度。绿线和红线在两侧折叠成一条线。
在中间,行高是字体大小的两倍。
在右侧,行高是字体大小的一半。
请注意,如果行高小于字体高度,则内联元素的外部边缘(红线)无关紧要。
内联块级元素
![enter image description here](https://istack.dev59.com/XZh9ql.webp)
从左到右,您可以看到:
边界的外边距由红线表示,边框为黄色,内边距为绿色,内容区域为蓝色。每个inline-block
元素的基线显示为蓝色线。
inline-block
元素的基线取决于元素是否具有流动内容。在以下情况下:
有流动内容时,inline-block
元素的基线是正常流中最后一个内容元素的基线(左侧示例)
有流动内容,但overflow
属性计算出的值不是visible时,基线是外边距框底边缘(中间示例)
无流动内容时,基线同样是外边距框底边缘(右侧示例)
行框
![图片描述](https://istack.dev59.com/mZAfIl.webp)
这可能是使用vertical-align
时最令人困惑的部分。这意味着,基线放置在需要满足所有其他条件(如vertical-align
和最小化行框高度)的任何位置。 它是方程中的一个自由参数。
由于行框的基线是不可见的,因此它可能不会立即明显。但是,您可以非常容易地使其可见。只需在问题行的开头添加一个字符,例如图中的“x”。如果此字符没有以任何方式对齐,则默认情况下它将位于基线上。
在其基线周围,行框具有我们可以称之为文本框的东西(图中的绿色线)。可以简单地将文本框视为行框内没有任何对齐的内联元素。它的高度等于其父元素的font-size
。因此,文本框仅仅包含了行框的未格式化文本。由于该文本框与基线相连,所以当基线移动时,它也会移动。
代码片段
如果您想尝试各种vertical-align
和font-size
的实验,请使用以下代码片段进行尝试。您还可以在JSFiddle上找到它。
let sl1 = document.getElementById('sl1');
let sl2 = document.getElementById('sl2');
let sl3 = document.getElementById('sl3');
let sl4 = document.getElementById('sl4');
let elm1 = document.getElementById('elm1');
let elm2 = document.getElementById('elm2');
let elm3 = document.getElementById('elm3');
let elm4 = document.getElementById('elm4');
let ip1 = document.getElementById('ip1');
let ip2 = document.getElementById('ip2');
let ip3 = document.getElementById('ip3');
let ip4 = document.getElementById('ip4');
let slArr = [sl1, sl2, sl3, sl4];
let elmArr = [elm1, elm2, elm3, elm4];
let ipArr = [ip1, ip2, ip3, ip4];
let valueArr = ['baseline', 'top', 'middle', 'bottom'];
for (let i = 0; i < slArr.length; i++) {
slArr[i].addEventListener('change', (event) => {
elmArr[i].style.verticalAlign = event.target.value;
elmArr[i].innerHTML = event.target.value;
addDiv();
})
}
for (let i = 0; i < ipArr.length; i++) {
ipArr[i].addEventListener('change', (event) => {
elmArr[i].style.fontSize = event.target.value + 'em';
addDiv();
})
}
document.getElementById('btnRandom').addEventListener('click', () => {
for (let i = 0; i < elmArr.length; i++) {
let element = elmArr[i];
let fontSize = Math.floor(Math.random() * 4 + 1);
ipArr[i].value = fontSize;
element.style.fontSize = fontSize + 'em';
let styleIndex = Math.floor(Math.random() * 4);
element.style.verticalAlign = valueArr[styleIndex];
element.innerHTML = valueArr[styleIndex];
slArr[i].selectedIndex = styleIndex;
}
}, this);
function addDiv() {
let view = document.getElementById('viewer');
view.innerHTML = "";
elmArr.forEach(function(element) {
let div = document.createElement('div');
div.appendChild(element.cloneNode());
view.appendChild(div);
}, this);
}
.header span {
color: #000;
}
select {
width: 100px;
}
#elms {
border: solid 1px #000;
margin-top: 20px;
position: relative;
}
span {
color: #FFF;
font-size: 1em;
}
#elm1 {
background-color: #300;
}
#elm2 {
background-color: #6B0;
}
#elm3 {
background-color: #90A;
}
#elm4 {
background-color: #B00;
}
div {
z-index: -1;
}
#div1 {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
top: 25%;
}
#div2 {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
top: 50%;
}
#div3 {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
top: 75%;
}
<div class="header"> <span style="width: 100px;display: block;float: left;margin-right: 20px;">vertical align</span> <span>font-size(em)</span> </div>
<div>
<select name="sl1" id="sl1">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip1" />
<br>
<select name="sl2" id="sl2">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip2" />
<br>
<select name="sl3" id="sl3">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip3" />
<br>
<select name="sl4" id="sl4">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip4" />
<br>
<button id="btnRandom" (onclick)="random()">Random</button>
</div>
<div id="elms">
<span id="elm1">one</span>
<span id="elm2">two</span>
<span id="elm3">three</span>
<span id="elm4">four</span>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="viewer"></div>
这段代码由Duannx提供。
来源:请注意,这是Christopher Aue撰写的垂直居中:所有你需要知道的一篇文章的摘录。