html--图片和文字一行时，对齐方式（图像相对于周围元素的水平和垂直对齐方式）_html文本以第一行对齐-程序员宅基地

技术标签： CSS html5 HTML

在布局中我们会发现一个DIV下放入一个img标签和一个span时会发现上线会错开几个像素无法对齐，
例如一下代码：

	<div>
		<img src="img.png" alt="这是一个图片">
		<span>文字对齐</span>
	</div>

效果是这样的，可以看到红的部分超出了容器
在这里插入图片描述
解决办法：
给 img 添加 align=“absbottom” 或者 align=“absmiddle” 属性

	<img src="img.png" alt="这是一个图片" align="AbsMiddle">

在这里插入图片描述

	//<img> 标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式
	
	//值有一下几种
	AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。
	AbsMiddle 图像的中间与同一行中最大元素的中间对齐。
	Baseline 图像的下边缘与第一行文本的下边缘对齐。
	Bottom 图像的下边缘与第一行文本的下边缘对齐。
	Left 图像沿网页的左边缘对齐，文字在图像右边换行。
	Middle 图像的中间与第一行文本的下边缘对齐。
	NotSet 未设定对齐方式。
	Right 图像沿网页的右边缘对齐，文字在图像左边换行。
	TextTop 图像的上边缘与同一行上最高文本的上边缘对齐。
	Top 图像的上边缘与同一行上最高元素的上边缘对齐。

本文链接：https://blog.csdn.net/weixin_44287376/article/details/98035525

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

USRP环境配置及测试_usrp benchmark_rate-程序员宅基地

文章浏览阅读4.5k次，点赞7次，收藏33次。USRP环境配置及测试文章目录**USRP环境配置及测试****安装Ubuntu18.04（非虚拟机）****安装UHD****安装GNU Radio****USRP B210测试****供应商建议的测试**安装Ubuntu18.04（非虚拟机）选取理由：经测试安装双系统Ubuntu18.04版本可以成功运行，20.04版本、虚拟机配置失败。20.04版本理论上可行，但是截止至2020.9.26为止，部分资源缺乏，安装GNU Radio和UHD稍稍复杂，故推荐Ubuntu18.04版本鉴于该部分较为_usrp benchmark_rate

关于Ubuntu18.04风扇狂转的解决办法_linux风扇掉了一个之后其他的狂转-程序员宅基地

文章浏览阅读6.2k次。1.关闭睿频echo 1 > /sys/devices/system/cpu/intel_pstate/no_turbo2.限制CPU最大频率到50%echo "50" | sudo tee /sys/devices/system/cpu/intel_pstate/max_perf_pct两个办法都可以，方法2更灵活，全程可以通过下面的命令实时查看：watch -n 0 "ca..._linux风扇掉了一个之后其他的狂转

【C语言】06-基本数据类型-程序员宅基地

文章浏览阅读51次。本文目录一、变量二、类型修饰符三、不同编译器环境下基本数据类型的存储长度说明：这个C语言专题，是学习iOS开发的前奏。也为了让有面向对象语言开发经验的程序员，能够快速上手C语言。如果你还没有编程经验，或者对C语言、iOS开发不感兴趣，请忽略C语言有丰富的数据类型，因此它很适合用来编写数据库，如DB2、Oracle都是C语言写的。C语言的数据类型大致可以分为下...

接入第三方SDK初始化失败原因_lenovo sdk登录失败-程序员宅基地

文章浏览阅读2.4w次。接入第三方SDK初始化失败原因最近在接联通计费SDK，出现了一些问题，大家可以看下。（Java大神可以自动略过，只对SDK新人有效）各种权限以及配置文件全部做好了，但是老是提示SDK初始化失败，查询了官方文档，说是有以下三种原因，1. 如果在logcat输出中出现“----->called from error place”，说明初始化接口没有按照规定放在Applic_lenovo sdk登录失败

神舟笔记本（战神）摄像头或者相机不能使用的解决方法_神舟战神z8摄像头打不开-程序员宅基地

文章浏览阅读2.1w次，点赞22次，收藏2次。今天下午想开发一下自己摄像头，结果打不开，所以很烦躁，查了很多资料都不行，最后发现，可能大家摄像头或者相机应用不能打开的情况，与驱动和设备硬件没有关系，而是你没有打开摄像头注意这个F10 有个摄像头标注，按下fn+F10 就可以打开摄像头了。..._神舟战神z8摄像头打不开

Spring Boot 应用集成 Activiti 工作流引擎_springboot整合activiti工作流-程序员宅基地

文章浏览阅读698次。Spring Boot 应用集成 Activiti 工作流引擎_springboot整合activiti工作流

随便推点

vue 赋值不改变_vue data对象重新赋值无效(未更改)的解决方式_vue赋值不成功-程序员宅基地

文章浏览阅读1w次。vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{}，那么后面在方法用普通的js语法赋值会无效这里是datadata() {undefinedreturn {undefinedmodel: {}};}这里是方法里的普通赋值afterUpload(response) {undefinedthis.model.icon = response.url;}普通方法会无效，需要使用vue提供的方法重新显示声明afterUpload(response_vue赋值不成功

popupwindow_popupwindow线程-程序员宅基地

文章浏览阅读376次。PopupWindow_popupwindow线程

centos6.10 开机卡死在“starting certmonger failed”_start certmonger-程序员宅基地

文章浏览阅读4.5k次。昨天升级openssl之后，真的入坑了，正常关机之后，今天居然开不了机了，卡在了进入图形界面的地方。于是重启按住“e”键，进入启动菜单，接着再按e进入编辑第一项，向下移动到第二项目kernel，接着按e进入编辑，去掉rhgb quiet字样，按回车保存回到选择项目，按b启动就能看到启动过程了，这时发现系统卡在了“starting certmonger failed”的地方。网搜是图形界面..._start certmonger

VSCODE C语言突然又不能跳转到定义了_vscode c语言无法跳转定义-程序员宅基地

文章浏览阅读962次。VSCODE 真是想说爱你不容易啊三天二头的不能跳到定义，跳转定义时，每次都要新打开一个文件，而且以前打开的，也不会理你，感觉是那么弱痴一样。没办法谁叫没更好用的编辑工具呢在网上找了半天，结果是C/C++插件切换到了预发布版本，切换回来重启一下软件，就行了。..._vscode c语言无法跳转定义

G2plot 自定义tooltip的单条数据结构itemTpl_g2plot tooltip title fields-程序员宅基地

文章浏览阅读560次。fileds字段列出来需要用的字段_g2plot tooltip title fields

Java Web前端——HTML常用标签_java<html><font color='red'>-程序员宅基地

文章浏览阅读209次。html简介1.1 html概述html全称：Hyper Text Markup Language(超文本标记语言)超级文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符。可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执_java