前两天在做HTML+CSS设置前端页面时，小席提出一个我之前一直没有关注的问题：在一行文字+一个图片在一行表示的时候，一般在开发中UI设计的时候为了美观和客户的观感都会将文件的中间和图片的中间进行对齐，但是我一般都采用margin和padding一点一点的去修改。
一个div盒子中的文字和图片没有对齐的样子如下：
div盒子中默认的对齐方式基线对齐
基线对齐就是文字的下面和图片的下面对齐。
我们加上css的样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
font-size: 28px;
vertical-align: middle;
}
.one img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="one">
<span>祝延彬</span>
<img src="make3img/img_peo.png" >
</div>
</body>出来的样式即为：
在这里说明一个vertical-align
vertical-align是在垂直对齐，想要连个元素都对齐，首先要对连个元素包裹在一个div中，并对div中所有的元素都需要进行vertical-align的属性，才可以出现效果。
vertical-align：前端学习之垂直对齐（vertical-align）_前端垂直对齐-CSDN博客
2855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
