HTML5+CSS3 将图片和文字置于一行

将文字对齐图片中心的水平位置

今天课堂作业上有一段是要做出文字与图片在一行且文字对齐图片的中心位置。课上用inline-block做的,但盒子总是不受控制。于是回来随便找了个图片用vertical-align做成功了。

这是原本的样式(加了边框方便看盒子)如图:

然后用垂直对齐,加大了字体,去掉了里面的盒子框框。如图:

css 复制代码
<style>
		.box1{
			border:2px black solid;
		}
		img{
			width:50px;height:50px;
		}
		span{
			width:100px;height:50px;
			vertical-align: 15px;
			font-size: 30px;
		}
</style>
html 复制代码
<body>
	<div class="box1">
	<img src="../images/images1/p2.png" 
	alt="p2"/>
		<span>传智播客</span>
	</div>
</body>

思路:img和span都是inline元素,用block元素将这两个盒子装起来,然后设置span垂直对齐即可。

相关推荐
鬼谷中妖9 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A9 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER9 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父10 小时前
前端速通—CSS篇
前端·css
pixle010 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf198710 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH10 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童10 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
非凡ghost10 小时前
火狐浏览器(Firefox)tete009 Firefox 多语便携版
前端·firefox
文心快码BaiduComate10 小时前
文心快码Comate3.5S更新,用多智能体协同做个健康管理应用
前端·人工智能·后端