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


本文摘自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:

1

2

3

4

5

6

7

8

9

10

11

.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%;

}

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

阅读剩余部分

相关阅读 >>

css justify-content属性怎么用

css border-right-color属性怎么用

css删除线颜色怎么设置

css列表怎么横着排列

css清除浮动float的三种方法是什么

前端怎么学

浏览器解析渲染html文档的过程详解(图文)

css中有哪些字体属性

css如何实现input不可编辑

html5的classlist属性操作css类的使用详解

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...