vertical-align的使用问题-慕课网

1回答

Rosen 2017-08-19 19:27:25

verticle-align一般用于行内元素，或者表格单元，可以看看这个http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp。

如果是想让文字在块级元素中垂直居中的话，可以同时设置height和line-height

0 回复有任何疑惑可以回复我~

提问者李行知 #1

可是我这个就是行内元素啊，不是想让文字居中，而是想让元素居中，而且为什么一个实现了一个没有实现

回复有任何疑惑可以回复我~ 2017-08-19 21:08:18

Rosen 回复提问者李行知 #2

用下面这段代码试试应该能明白了， vertical-align的位置参考的是行高，并不是外容器的高度，别弄混。第二个图里行高被image撑开了所以会居中。最后你自己写的行高就是sss那行，没设置过行高的话就是字体高度。
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .con{
        width: 100px;
        height: 100px;
        background: red;
    }
    .con .low{
        display: inline-block;
        background: yellow;
        height: 20px;
        vertical-align: middle;
        /*vertical-align: top;*/
        /*vertical-align: bottom;*/
    }
    .con .high{
        display: inline-block;
        line-height: 50px;
        background: blue;
    }
    </style>
</head>
<body>
<div class="con">
    <span class="low">sss</span>
    <span class="high">high</span>
</div>
</body>
</html>

回复有任何疑惑可以回复我~ 2017-08-19 23:41:17

提问者李行知回复 Rosen #3

也就是说需要多个行内元素形成对比才有用，以最高的元素来作为参考

回复有任何疑惑可以回复我~ 2017-08-20 00:25:43

点开查看后面1条评论

vertical-align的使用问题

正在回答

1回答

相似问题

请选择置顶位置

本课精华内容

除了webpack-dev-server还有什么自动刷新的本地服务器？

老师，我的css和js也是加载不出来

老师，sass安装不上

关于font-awesome引入失败

登陆成功，但是首页没有显示，欢迎你xxx?

热搜

最近搜索清空