关于<img>标签与文字的对齐问题:


排版使图片与文字在同一行,例
<img src="image/about-icon1.png" alt=""/>&nbsp;消费者保障

 

看起来文字偏下方,现在加上一个属性

img{
vertical-align: middle;
}
效果如下:

 

这个属性在实际问题中非常实用,vertical-align 设置元素的垂直对齐方式,所有浏览器都支持这个属性。

转载于:https://www.cnblogs.com/xiezz/p/7469306.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="box"> <nav> <img src="img/logo.png"> <ul id="nar"> <li class="lis"> <a href="index.html">首页</a> </li> <li class="lis"> <a href="page1.html">热门景点</a> </li> <li class="lis"> <a href="page2.html">特产美食</a> <ul class="lison"> <li><a href="#">特产</a></li> <li><a href="#">美食</a></li> </ul> </li> <li class="lis"> <a href="page3.html">民俗文化</a> <ul class="lison"> <li><a href="#">西河大鼓</a></li> <li><a href="#">吴桥杂技</a></li> <li><a href="#">河北梆子</a></li>> </ul> </li> <li class="lis"> <a href="page4.html">用户调研</a> </li> </ul> <div id="time"></div> </nav> <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img class="one" src="img/p2.jpg" /></li> <li class="pic"><img class="one" src="img/p1.jpg" /></li> <li class="pic"><img class="one" src="img/p3.jpg" /></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <table class="city"> <tr> <td><img src="img/p4.jpg"></td> <td><img src="img/p5.jpg"></td> <td><img src="img/p6.jpg"></td> <td><img src="img/p7.jpg"></td> <td><img src="img/p8.jpg"></td> </tr> <tr> <td> <h2>石家庄</h2> </td> <td> <h2>唐山</h2> </td> <td> <h2>张家口</h2> </td> <td> <h2>保定</h2> </td> <td> <h2>秦皇岛</h2> </td> </tr> </table> <h1>——<span>河北宣传片</span>——</h1> <div class="video"> <video src="img/shipin.mp4" controls></video> <p>这片土地既丰富又神秘<br> 没有人知道<br> 还有多少未知的物种等待去发现<br> 而即便是那些已经被广泛知晓的物种<br> 以我们目前的认知<br> 也仅仅只掌握了密码的一小部分<br> 每种生命都是复杂而珍贵的<br> 尊重爱护它们的密码<br> 也是在保护我们自身的未来<br> 人们未来美好生活的蓝图<br> 建立在生物多样性的繁盛之上<br> 这张蓝图宏伟且谦卑<br> 它既承载着中国智慧<br> 也承载着世界生态文明的未来<br> <span>视频来源:河北文旅</span> </p> </div> <footer> <div> <p>电话:1234567890<br> 邮箱:6666666@163.com<br> </p> <img src="img/logo.png"> </div> <p style="text-align: center;">©河北文旅</p> </footer> </div> <script src="js/js.js"></script> </body> </html>每行代码都是什么意思,每行代码全部打出来
06-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值