html怎么设置不同的字号,css不同字体大小对齐

css不同字体大小对齐

话不多说，先来看一下默认情况下，字体大小不同的同一行文字是如何展示的，以下实例中添加了背景颜色，用于分辨：

总价200万最多省20万

样式如下：

* {

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;

}

此时看到页面如下：

现在呢，我们想把它们垂直居中对齐，方法也很简单：(给每个子元素添加"vertical-align: middle;")

样式如下：

* {

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;

}

此时看到页面如下：(此时垂直居中了)

更多HTML/css知识，可以关注HTML中文网 HTML视频教程和CSS视频教程