话不多说,先来看一下默认情况下,字体大小不同的同一行文字是如何展示的,以下实例中添加了背景颜色,用于分辨:
<body>
<div class="row">
<span class="zongjia">总价</span><span class="price">200万</span><span class="sheng">最多省20万</span>
</div>
</body>
样式如下:
<style>
* {
padding: 0;
margin: 0;
}
.row {
background-color: #cccccc;
margin-top: 20px;
}
.zongjia {
font-size: 26px;
background-color: #c9e2b3;
}
.price {
font-size: 36px;
background-color: #a6e1ec;
}
.sheng {
font-size: 22px;
background-color: #ff7800;
}
</style>
此时看到页面如下:
放大来看看:
放大可以看到:最外层class为row的元素的高度=里面最大字体元素的高度;但是两边的小的为啥下面还留点儿空隙?为啥不居上或者居底显示呢?这里不是很明白,希望明白人来教教我。。。。。。
现在呢,我们想把它们垂直居中对齐,方法也很简单:(给每个子元素添加"vertical-align: middle;")
样式如下:
<style>
* {
padding: 0;
margin: 0;
}
.row {
background-color: #cccccc;
margin-top: 20px;
margin-left: 20px;
}
.zongjia {
font-size: 26px;
background-color: #c9e2b3;
vertical-align: middle;
}
.price {
font-size: 36px;
background-color: #a6e1ec;
vertical-align: middle;
}
.sheng {
font-size: 22px;
background-color: #ff7800;
vertical-align: middle;
}
</style>
此时看到页面如下:(此时垂直居中了)