先来看张图片
相信很多css新手遇到过这种问题，就是当图片和文本显示在一行的时候，效果很奇葩，文字和图片没法对齐，
这时我们需要做的是：
1，先给块级元素设置 display: inline-block; （行内的块级元素）
2，给图片设置高度，文本盒子不设置高度
3，给图片和文本都设置 vertical-align: middle;
4，搞定，看效果吧
顺便贴一下示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片文字垂直居中</title>
<style type="text/css">
img{
width: 100px;
height: 60px;
vertical-align: middle;
}
div{
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<img src="img/pic.jpg"/>
<div>纵然只有倒下才是终点，我只有未来没有从前。
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）