话不多说, 先来看一下默认情况下, 字体大小不同的同一行文字是如何展示的, 以下实例中添加了背景颜色, 用于分辨:
- <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>
此时看到页面如下:
现在呢, 我们想把它们垂直居中对齐, 方法也很简单:(给每个子元素添加 "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>
此时看到页面如下:(此时垂直居中了)
更多 html/CSS 知识, 可以关注 PHP 中文网 HTML 视频教程 http://www.php.cn/course/list/11.html 和 CSS 视频教程 http://www.php.cn/course/list/12.html
来源: http://www.css88.com/qa/css3/14242.html