老师,关于vertical-align填写数值为什么会变成行高样式

老师,关于vertical-align填写数值为什么会变成行高样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
     /*此处写代码*/ 
     .one{background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);
        width:600px;height:600px;
        text-align:center;}
    span{vertical-align:50px;}
    
       
    </style>
</head>
<body>
    <div class="one">
        <span>《长歌行》
        <br>
        <br>青青园中葵,朝露待日晞。
        <br>阳春布德泽,万物生光辉。
        <br>常恐秋节至,焜黄华叶衰。
        <br>百川东到海,何时复西归。
        <br>少壮不努力,老大徒伤悲。
        <br>
        </span>
    </div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
提问者 阿满满满 2019-04-15 14:40:08

我在使用vertical-align对span标签设置垂直方式时,填写的数值,发现文本并不是整体下移,而是变成了行间距,每段文本之间出现了相应数值的间距。并且填写middle,top,bottom等值都无效,这是为什么,是参照物出了问题吗

  • 根据br 标记本身的属性,html中<br/>元素是内联元素。因此会继承span设置的vertical-align:50px;这里同学只需要记住,vertical-align常用于图片垂直居中,以及图片与文字垂直方向的对齐即可
    2019-04-15 15:31:27
卡布琦诺 2019-04-14 18:38:14

因为vertical-align 属性是设置元素的垂直对齐方式,line-height也是文本设置垂直居中的,因此对于文本内容,两者都是设置垂直对齐的,因此有异曲同工之处。

希望可以帮到你!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师