html日常笔记

最新推荐文章于 2024-08-20 19:23:57 发布

程序猿Joker

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量383

点赞数 9

文章标签： html 笔记 javascript

本文链接：https://blog.csdn.net/weixin_41006147/article/details/135124033

版权

项目场景：

html自定义一个底部导航栏，设置背景图因为大小原因，图片与文字没有对齐（记录一下防止忘记）

问题描述

给 li 标签设置背景图大小原因，图片与文字没有对齐

.body-footer ul li.action{
    background-image: url("/work/title_nev_bj.png")  ;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: contain;
}

在这里插入图片描述

原因分析：

因为 li 标签宽度大于背景图片，并且设置background-repeat: no-repeat不是填充整个容器

解决方案：

方法1：设置 margin-left 与 margin-right
方法2：设置background-position-x: center 横向居中

.body-footer ul li.action{
    background-image: url("/work/title_nev_bj.png")  ;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
}