如下圖所示布局：将圖檔水準、垂直居中。
提供2種實作方案
首先，了解一下vertical-align，此處參考MDN
vertical-align是 用來指定行内塊元素(inline-block)或表格單元格（table-cell）元素的垂直對齊方式
比較常見的4種用法：
- vertical-align: top;
- vertical-align: middle;
- vertical-align: baseline;
- vertical-align: bottom;
方案一：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
margin: 50px auto;
background-color: gray;
text-align: center;
}
/*先用輔助标簽span将高度撐開 */
.box span{
display: inline-block;
height: 100%;
width: 1px;
background-color: red;
vertical-align: middle;
}
/*圖檔垂直居中*/
.box img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
x<img src="./mz3.jpg" alt=""><span></span>
</div>
</body>
</html>
效果如下：
方案二：
前面方案加span的主要原因是撐開一個高度，其實我們可以直接用給父元素加line-height來撐開，實作如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
line-height: 300px;/*通過文字行高撐開300px的高度*/
font-size: 30px;/*文字大小無所謂，這裡隻是友善顯示x*/
margin: 50px auto;
background-color: gray;
text-align: center;
}
.box img{
vertical-align: middle;/*與x的中線對齊*/
}
</style>
</head>
<body>
<div class="box">
x<img src="./mz3.jpg" alt="">
</div>
</body>
</html>
效果如下：
類似應用還有實作登入、注冊時，在前面加"*"星号提示為必填項，原理類似：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
b{font-weight: normal;}
div{
width: 500px;
margin: 0 auto;
height: 50px;
line-height: 50px;/*直接line-height'*'無法垂直居中*/
text-align: center;
background-color: pink;
margin-bottom: 10px;
}
div span{
color: red;
font-weight: bolder;
margin-right: 8px;
}
.box2 span{
display: inline-block;
height: 30px;
line-height: 33px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box1">
<span>*</span>直接line-height無法實作星号垂直居中
</div>
<div class="box2">
<span>*</span>你好，世界X
</div>
</body>
</html>
效果如下：