css图片后的文字无法居中怎么办-木庄网络博客

css图片后的文字无法居中怎么办

2022-03-23 04:33:53 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者藏色散人，侵删。

css图片后的文字无法居中的解决办法：首先创建一个HTML示例文件；然后布局一张图片和文字；最后给图片和文字分别加上样式为“vertical-align: middle”即可。

本教程操作环境：windows7系统、css3版、thinkpad t480电脑。

推荐：《css视频教程》

css图片后的文字无法居中?

比如说，现在我要做一个简单的删除按钮，只由一个icon和“删除”两个字组成，你会如何布局，给你30秒时间考虑。

好，先亮出HTML代码如下：

1	`<div` `class="del"><span` `class="icon"></span><span>删除</span></div>`

很简单，就是一个class为del的div元素下有两个span标签，当然icon你也可以直接用伪元素代替（还不知道伪元素的面壁思过去...）。

接下来你可能会这么写CSS：

.del {
font-size: 18px;
}
.del .icon {
display: inline-block;
width: 16px;
height: 24px;
margin-right: 5px;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}

然后它就变成这个样子了：

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css图片后的文字无法居中怎么办

css图片后的文字无法居中怎么办

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论