前言：在用html写一下简单的布局时，经常遇到图片和文字需要在一排并且居中的需求，例如网页的Title部分，app的按钮部分等，但是设置后发现并没有居中，默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐，图片会默认偏上，下面就是从网页的Title部分讲述几种解决的小方法。
HTML代码：
<body>
<div class="container">
<span class="text">你好,XXX</span>
<img src="./logoutimage.png" alt="">
</div>
</body>CSS代码：
body {
padding: 0;
margin: 0;
}
.text {
line-height: 26px;
font-size: 24px;
background-color: yellow;
}
img {
background-color: red;
height: 26px;
width:26px;
}效果：
方法一：
使用vertical-align: text-bottom;（将支持valign特性的对象的文本与对象顶端对齐）
将图片img设置成：
vertical-align: text-bottom;方法二：
设置图片margin-bottom：为负值，使图片向下移动，这个数值可以根据自己的实际情况进行调节，但是不是很兼容。
margin-bottom:-4px;
最终效果：
