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垂直对齐即可。

相关推荐
li理2 分钟前
鸿蒙 Next 布局大师课:从像素级控制到多端适配的实战指南
前端
前端赵哈哈6 分钟前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
Nicholas6813 分钟前
flutter滚动视图之ScrollView源码解析(五)
前端
电商API大数据接口开发Cris15 分钟前
Go 语言并发采集淘宝商品数据:利用 API 实现高性能抓取
前端·数据挖掘·api
风中凌乱的L20 分钟前
vue 一键打包上传
前端·javascript·vue.js
GHOME24 分钟前
Vue2与Vue3响应式原理对比
前端·vue.js·面试
张元清26 分钟前
useMergedRefs: 组件封装必不可少的自定义Hook
前端·javascript·面试
openInula前端开源社区26 分钟前
【openInula茶话会】第四期:openInula API2.0编译器原理
前端·javascript
moyu8428 分钟前
深入解析 JavaScript 作用域链:变量查找的核心机制
前端
1024小神29 分钟前
微信小程序xr-frame中的marker识别OSD Marker和2DMarker
前端