vertical-align:middle怎么用啊,只好直接设大小暴力对齐

vertical-align:middle怎么用啊,只好直接设大小暴力对齐

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="outer">
   <div class="inner">
   <img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg">
   <span class="text1">CSS层叠样式表</span>
   <span class="text2">(Cascading Style Sheets)</span>
  </div>
</div>
</body>
</html>



div.outer{
   width:1024px;
   height: 200px;
   background-color:#eeeeee;
   border: 1px solid black;
}
.text2 {
   text-decoration: underline;
   color: red;
   vertical-align: 4px;
}
.text1{
   font-size: 2em;
}
div.inner{
   line-height: 200px;
   text-align: center;
   vertical-align:middle;
}
img{
   vertical-align:-14px;
}http://img1.sycdn.imooc.com//climg/5db9a61809dd700619120412.jpg


正在回答

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

2回答

同学你好!
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。即是图片、span元素的基线和div的基线对齐。

如果帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕码 2019-10-31 10:15:51

同学你好!
可以给图片、两个span都设置vertical-align: middle:

http://img1.sycdn.imooc.com//climg/5dba432f0921004605340512.jpg

效果:

http://img1.sycdn.imooc.com//climg/5dba433b09dd861e05530086.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕桂英6102712 #1
    他们三个的vertical-align:middle是相对于哪个对齐的
    2019-10-31 10:18:34
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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