就是把马尔高和那段话放在白胡子那段话旁边同行并列求讲一下咯难搞哦
3条回答 默认 最新
- 偷拨网线的william 2022-06-14 21:27关注
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下。
目前使用3种方法实现,我用百度图片作为示例。
1.添加CSS属性vertical-align:middle; <style> a img { border: none; } .testdiv * { vertical-align: middle; } </style> <div class="testdiv"> <a href="https://www.baidu.com/"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="这里是图片" /></a> <span>这里是文字,看看文字对齐了没</span> </div>
2.div嵌套
将图片和文字分别套上一个div,就可以利用 margin 熟悉任意定位了<style> a img { border: none; } .testIMG { float: left; display: inline; margin-top: 0; margin-left: 5px; } .testTXT { float: left; display: inline; margin-top: 20; margin-left: 5px; } </style> <div class="testdiv"> <div class="testIMG"> <a href="https://www.baidu.com/" ><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="这里是图片" /></a> </div> <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div> </div>
3.把图片作为背景
如果你的图片只是用来作为小图标放在文字的左侧,那就推荐用这个方法,图片设置成文字的背景,不循环,定位在左侧上下居中,文字向左padding图片的宽度加几个像素。<style> a img { border: none } .testTXT { height: 68px; line-height: 60px; padding-left: 220px; background: url(https://www.baidu.com/img/flexible/logo/pc/result.png) no-repeat left center } </style> <div class="testdiv"> <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div> </div>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 全部备份安卓app数据包括密码,可以复制到另一手机上运行
- ¥15 Python3.5 相关代码写作
- ¥20 测距传感器数据手册i2c
- ¥15 RPA正常跑,cmd输入cookies跑不出来
- ¥15 求帮我调试一下freefem代码
- ¥15 matlab代码解决,怎么运行
- ¥15 R语言Rstudio突然无法启动
- ¥15 关于#matlab#的问题:提取2个图像的变量作为另外一个图像像元的移动量,计算新的位置创建新的图像并提取第二个图像的变量到新的图像
- ¥15 改算法,照着压缩包里边,参考其他代码封装的格式 写到main函数里
- ¥15 用windows做服务的同志有吗