体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

图片居中显示

来源：2-3 课程导航栏

Star3327752

2022-04-20 13:42:42

问题描述：左上角的图片无论如何都不能居中显示

相关截图：问题截图（左上角无法居中位置已标记）

https://img.mukewang.com/climg/625f9c7a0913584425601600.jpg

相关截图：内容截图

https://img.mukewang.com/climg/625f9cd109fe5da325601600.jpg

相关截图：图片尺寸

https://img.mukewang.com/climg/625f9d360943575f25601600.jpg

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕课首页</title>
    <link rel="stylesheet" href="./CSS/01-header.css">
    <link rel="stylesheet" href="./CSS/02-banner.css">
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./js/index.js">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./font2/iconfont.css">
</head>

<body>
    <!--头部区域开始-->
    <div id="header" class="bgfff">
        <div class="nav-box">
            <div style="text-align: center">
                <h1 class="fl">
                    <a href="index.html">logo</a>
                </h1>
            </div>
            <ul class="item-box fl">
                <li><a href="#">学习</a></li>
                <li><a href="#">活动</a></li>
                <li><a href="#">精品课</a></li>
                <li><a href="#">资源中心</a></li>
                <li><a href="#">课程联盟</a></li>
                <li><a href="#">虚拟科研室</a></li>
                <img src="./images/new.png" alt="">
            </ul>

            <div class="search fl">
                <div class="search-area">
                    <input type="text" placeholder="校园风景">
                    <span class="iconfont icon-sousuo"></span>
                </div>
            </div>

            <div class="login-area fr">
                <a href="#">登录</a> |
                <a href="#">注册</a>
                <a href="#" class="shop-cart">
                    <span class="iconfont icon-kecheng1"></span>
                    <span>我的课程</span>
                </a>
                <span class="cart-num">7</span>
            </div>
        </div>
    </div>
    <!--头部区域结束-->

    <!--课程轮播图区域开始-->
    <div id="banner">
        <div class="banner-box w">
            <div class="g-banner">
                <div class="course-list fl">
                    <ul>
                        <li>
                            <span class="title">城南学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">土木工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">经济与管理学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">水利与环境工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">电气与信息工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">计算机与通信工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">更多学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                    </ul>

                </div>
                <div class="swiper fr">
                    <a href="#" target="_self"> </a>
                    <!--这里的blank是指打开超链接的时候会打开一个新窗口，如果是self则是本窗口打开-->

                    <!--箭头区域-->
                    <div class="arrow arrow-l">
                        <span class="iconfont icon-angle-left"></span>
                    </div>
                    <div class="arrow arrow-r">
                        <span class="iconfont icon-angle-right"></span>
                    </div>
                    <ul class="circle-list">
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

            <div class="sys-class">
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/java.png);"></div>
                    <div class="title fl">
                        <h4>Java程序设计基础</h4>
                        <p>项洁</p>
                    </div>
                </a>

                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/h5.png);"></div>
                    <div class="title fl">
                        <h4>互联网电子商务技术</h4>
                        <p>卢曼莎</p>
                    </div>
                </a>

                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/python.png);"></div>
                    <div class="title fl">
                        <h4>Python程序设计应用</h4>
                        <p>朱前飞</p>
                    </div>
                </a>

                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/web.png);"></div>
                    <div class="title fl">
                        <h4>Web系统与技术</h4>
                        <p>湛新霞</p>
                    </div>
                </a>
               
                <div class="line"></div>

                <a href="#" class="more-btn">
                    <div>课程</div>
                    <div>
                        more
                        <span class="iconfont icon-angle-right"></span>
                    </div>
                </a>

            </div>
        </div>
    </div>
    <!--课程轮播图区域结束-->




    <script src="./js/index.js"></script>

</body>

</html>

相关代码：

#header{
    min-width: 1150px;
    height: 72px;
    border-bottom: 1px solid #ccc;
}
.nav-box{
    margin: 0 auto;
    width: 1200px;
}
.nav-box h1{
    width: 126px;
    height: 72px;
    line-height: 72px;
    background-image:url(../images/csust.png);
    background-repeat: no-repeat;
   
   
    background-size: 126px ;/*直接调整背景的宽高*/
}
.nav-box h1 a{
    display: block;
    width: 126px;
    height: 72px;
    font-size: 0;
}
.item-box{
    height: 72px;
    line-height: 72px;
    margin-left: 20px;
}
.item-box li{
    float: left;
    padding: 0 16px;
}
.item-box img{
    position: absolute;
    left: 508px;
    top: 18px;
    width: 13px;
}
.search{
    padding: 16px 0;
    height: 40px;
    line-height: 40px;
}
.search div{
    background-color: #F3F5F6;
    border-radius: 6px;
}
.search div input{
    width: 200px;
    height: 30px;
    padding-left: 10px;
    border: 0;
    background-color: #F3F5F6;
}
.search .iconfont{
    padding-right: 10px;
}
/*登录注册区*/
.login-area{
    height: 72px;
    line-height: 72px;
}
.login-area a{
    padding: 0 20px;
}
.login-area .shop-cart{
    border-radius: 6px;
    padding: 8px 20px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    color: #1452a3;
}
.login-area .cart-num{
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    top: 8px;
    right: 60px;
    text-align: center;
    line-height: 20px;
    border-radius: 50% 50% 50% 0;
    background-color: #1073d5;
    color: #fff;
    font-size: 12px;
}


写回答

1回答

好帮手慕小尤

2022-04-20

同学你好，建议同学添加 background-position: center;使背景图居中显示。如下所示：然后测试代码试一下。

https://img.mukewang.com/climg/625fb10f091a163107970205.jpg

竹溪园看！

0

0 学习 · 9886 问题

查看课程

相似问题

老师教我修复一下轮播图

回答 1

图片溢出

回答 1

倒计时模块，文字图标居中问题

回答 1

回答 1

老师，图片无法轮播

回答 1

打开慕课网App查看更多内容