H5 CSS3 实现文字图片同行居中
来源：互联网 发布：加工中心半圆怎么编程 编辑：程序博客网 时间：2024/05/21 17:39
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>
显示效果：
加入了CSS代码调整后：
显示效果：
加入了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>
效果：
效果：
阅读全文
0 0
- H5 CSS3 实现文字图片同行居中
- html 文字 图片同行 垂直居中
- 图片和文字在同行居中的方法
- 图片和文字同行
- 轻松实现：垂直居中文字图片
- 重写button实现文字图片居中显示
- CSS - 实现图片垂直居中，文字垂直居中
- 文字居中和图片居中
- CSS图片文字居中
- 图片和文字居中
- 同行同高度显示图片和文字
- CSS3实现图片在DIV中上下左右居中（2）
- h5 canvas(toDataURL)实现将图片与文字结合
- CSS3实现垂直居中
- css3，居中文字，居中对齐，文字两端对齐
- 摘抄:CSS如何实现单行图片与文字垂直居中
- 重写Button实现图片drawableTop和文字一起居中
- Android自定义TextView实现文字图片居中显示
- 表的建立
- 图数据库：2 关联数据的存储选择
- 广告去弹窗
- MSP430学习笔记-定时器A
- 小知识点集合
- H5 CSS3 实现文字图片同行居中
- tf_3_Variable
- 什么是NIST加密标准？
- pom.xml出现web.xml is missing and <failOnMissingWebXml> is set to true解决方案
- 从JDK源码看字节流和字符流
- 【大数据】数学基础及应用
- Android图片添加阴影效果的两种方式
- 利用sftp进行远程ssh的上传下载
- es6快速入门（1）--字符串的扩展
