H5页面上常用到用户信息栏,用户头像和用户名称同行显示,一般图片高度会比文字高很多。这时候需要文字在整行中居中显示。查了网上的很多方法,都是不靠谱的。比如:设置div的line-height和height相同高度等。
这里实际使用了下述方法,亲测可用,同样试用与微信小程序的页面。
<html>
这里实际使用了下述方法,亲测可用,同样试用与微信小程序的页面。
<html>
<body>
<div>
<img src='image/test.jpg' width="90" height="90"/>
<span>I am text</span>
</div>
</body>
</html>
显示效果:
![图片](https://i-blog.csdnimg.cn/blog_migrate/8b3910b3c56b0a12054aeda305bd278b.jpeg)
加入了CSS代码调整后:
显示效果:
![图片](https://i-blog.csdnimg.cn/blog_migrate/8b3910b3c56b0a12054aeda305bd278b.jpeg)
加入了CSS代码调整后:
<html>
<head>
</head>
<head>
<style>
div {display: table}
span {display: table-cell; vertical-align: middle}
</style>
</head>
<body>
<div>
<img src='image/test.jpg' width="90" height="90"/>
<span>I am text</span>
</div>
</body>
</html>
效果:
效果:
![图片](https://i-blog.csdnimg.cn/blog_migrate/7a7a6e713e7a18fe7053aea2ed18e227.jpeg)