新手百度首页logo无法居中问题,求好心人解答。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度首页2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 12px;
            color: #666666;
        }
        a{
            color: #666;
            font-size: 13px;
        }
        header{
            height:50px;
            width: 100%;
            position: relative;
        }
        .aside_pic{
            display: block;
            width: 36px;
            height: 36px;
            background-image: url(bd_aside.png);
            margin: 0 auto;
        }
        .aside_pic2{
            background-position: -36px 0;
        }
        .aside_pic3{
            background-position: -74px 0;
        }
        .aside_pic4{
            background-position: -112px 0;
        }
        .aside_pic5{
            background-position: -144px 0;
        }
        .link{
            float: right;
            margin-top: 20px;
        }
        .link a{
            display: inline-block;
            margin-right:15px;
            font-size: 13px;
            color:#333;
            font-weight: bold;
            line-height: 24px;
        }
        .nav_1{
            padding:0 10px;
            float: right;
            position: relative;
        }
        .nav_1 p{
            width: 60px;
            /*height: 24px;*/
            line-height: 24px;
            text-align: center;
            color: white;
            background-color:dodgerblue;
            font-size: 13px;
            margin-bottom: 10px;
        }
        .nav_2{
            display:none;
            position: absolute;
            left: 0;
            top: 24px;
            text-align: center;
        }
        .nav_1 .nav_2 a{
            text-align: center;
            border-bottom: #dadada 1px solid;
            padding: 10px;
        }
        .nav_1:hover .nav_2{
            display: block;
            background-color: #f6f6f6;
        }
        .nav_1:hover p{
            color:#666;
            background-color: #f6f6f6;
        }
        #content{
            width: 100%;
            height: 450px;
            text-align: center;
        }
        #content .logo img{
            width:300px;
        }
        .search{
            width: 640px;
            height: 40px;
            margin: 25px auto;
            position: relative;
        }
        #search_txt{
            width: 540px;
            height:40px;
            border: 1px solid #666666;
            box-sizing: border-box;
            float: left;
        }
        #search_btn{
            width: 100px;
            height: 40px;
            color: white;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            background-color: #3384fe;
            box-sizing: border-box;
            float: left;
        }
        .search span{
            position: absolute;
            width: 18px;
            height: 16px;
            background: url(camera_new_5606e8f.png) no-repeat;
            left: 510px;
            top: 11px;
        }
        .code{
            width: 60px;
            height: 60px;
            background: url("2weima_efde696.png") no-repeat;
            margin: 170px auto;
            position: relative;

        }
        .code p{
            margin-top: 25px;
            position: absolute;
            bottom: -20px;
            left: 4px;
        }
        .footer{
            text-align: center;
            margin-top: 30px;
        }
        .footer p{
            margin-top: 10px;
        }


    </style>
</head>
<body>
<header>
    <div>
        <a href="JavaScript:">糯米</a>
        <a href="JavaScript:">新闻</a>
        <a href="JavaScript:">HAO123</a>
        <a href="JavaScript:">地图</a>
        <a href="JavaScript:">视频</a>
        <a href="JavaScript:">贴吧</a>
        <a href="JavaScript:">登录</a>
        <a href="JavaScript:">设置</a>
        <div id="nav">
            <p>更多产品</p>
            <div>
                <a href="JavaScript:">
                    <span class="aside_pic aside_pic1"></span>
                    音乐
                </a>
                <a href="JavaScript:">
                    <span class="aside_pic aside_pic2"></span>
                    音乐
                </a>
                <a href="JavaScript:">
                    <span class="aside_pic aside_pic3"></span>
                    音乐
                </a>
                <a href="JavaScript:">
                    <span class="aside_pic aside_pic4"></span>
                    音乐
                </a>
                <a href="JavaScript:">
                    <span class="aside_pic aside_pic5"></span>
                    音乐
                </a>
            </div>
        </div>
    </div>
</header>
<div id="content">
    <div><img src="bd_logo1.png"></div>
    <div>
        <span></span>
        <input type="text" id="search_txt">
        <input type="submit" id="search_btn" value="百度一下">
    </div>
    <div>
        <p><strong>手机百度</strong></p>
    </div>
</div>
<div>
    <p>
        <a href="JavaScript:">把百度设为首页</a>
        <a href="JavaScript:">关于百度</a>
        <a href="JavaScript:">About  Baidu</a>
        <a href="JavaScript:">百度推广</a>
    </p>
    <p>
        ©2016 Baidu
        <a href="JavaScript:">使用百度前必读</a>
        <a href="JavaScript:">意见反馈</a>
        京ICP证030173号
        <a href="JavaScript:">京公网安备11000002000001号</a>
    </p>

</div>
</body>
</html>

代码中有四个图片  这里我把图片原地址贴出来

-------------------------------------------------------------------------

bd_aside.png    //第28行

原图片地址:https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/bdbri_icons_0a62ce1.png

-------------------------------------------------------------------------

camera_new_5606e8f.png  //第126行

原图片地址:https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/camera_new_5606e8f.png

-----------------------------------------------------------------------------------------

2weima_efde696.png   //第133行

原图片地址:https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png

-------------------------------------------------------------------

bd_logo1.png         //第194行

原图片地址:https://www.baidu.com/img/bd_logo1.png

-------------------------------------------------------------------------------

我这里的中间百度logo一直无法居中,但是logo图片的父元素content我也设置了text-align:cengter;了啊   搞了半天还是没明白

希望有好心人帮忙解答!不胜感激!



Ni14
浏览 183回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP