cellRangeAddress 水平垂直居中

转载

码海无压 2024-09-28 15:27:23

在文章开头先说明一下此方法的兼容性，IE8+以及其他现代浏览器都支持此属性。

直接献上一个demo吧

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table-cell Demo</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
h3 {
position: absolute;
z-index: 9;
top: 0;
right: 0;
margin: 0;
}
h5 {
position: absolute;
z-index: 8;
top: 230px;
right: 0;
margin: 0;
color: red;
}
.line {
position: absolute;
width: 100%;
height: 250px;
border-bottom: 1px solid red;
}
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align: middle;
 
/*设置水平居中*/
text-align: center;
 
/* 针对IE的Hack */
 
*display: block;
/*约为高度的0.873，200*0.873 约为175*/
*font-size: 175px;
/*防止非utf-8引起的hack失效问题，如gbk编码*/
*font-family: Arial;
 
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
.img1 {
width: 40px;
height: 40px;
 
/*设置图片垂直居中*/
vertical-align: middle;
}
.img2 {
width: 80px;
height: 80px;
 
/*设置图片垂直居中*/
vertical-align: middle;
}
.img3 {
width: 120px;
height: 120px;
 
/*设置图片垂直居中*/
vertical-align: middle;
}
</style>
</head>
<body>
<div class="line"></div>
<div class="box">
<span>bpdqooo</span>
<img class="img1" src="./home.jpg"/>
<img class="img2" src="./home.jpg"/>
<img class="img3" src="./home.jpg"/>
<span>bpdqooo</span>
</div>
<h3>table-cell实现垂直居中</h3>
<h5>中线</h5>
</body>
</html>

以下是说明：

将class=”box”的div设为display: table-cell，即可实现div内元素的垂直居中

将我的demo用浏览器打开，可以看到我放了3张大小不一的图片，还有两段文字，我们暂且把这些东西看作是一行

好，为什么我要放三张图片呢？

现在我们可以做个实验：

把最大的图片(class=”img3”)设为vertical-align: top

可以看到其他图片和文字均向上偏移，而且第二大的图片(class=”img2”)顶部和img3对齐，这说明，img3的vertical-align属性控制行内其他所占高度更小的元素，并且对img2作用最强

接着上一步，再来做个实验：

把img2设为vertical-align: top

可以看到img1和文字均向上偏移，而且img1顶部和img3对齐，这说明，img2的vertical-align属性控制行内其他所占高度更小的元素，并且对img1作用最强

你是不是似乎明白了什么，同理，若把img设为vertical-align: top，那么两边的文字将会向上偏移，顶部与img1对齐。

结论：