新手关于自己做的百度首页logo无法居中

Question

自学了一段时间想练习一下，所以照着百度首页做了一个简单页面

一开始静态页面出来看起来还蛮正常

但是百度的右上角导航条有一个onmouseover才触发的侧边栏 就是这个

这是我做这部分的代码

<header>
    <div class="link">
        <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" class="nav_1">
            <p>更多产品</p>
            <div class="nav_2">
                <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 class="logo"><img src="bd_logo1.png"></div>
    <div class="search">
        <span></span>
        <input type="text" id="search_txt">
        <input type="submit" id="search_btn" value="百度一下">
    </div>
    <div class="code">
        <p><strong>手机百度</strong></p>
    </div>
</div>

这是样式

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;
}

但是这样之后中间内容区域的logo图片无法居中了

中间内容区域content我也设置了text-align:center啊  没有加上面那个侧边栏的时候还正常显示在中间  加了侧边栏后就这样了，但是我的侧边栏是绝对定位 还以为不会影响别的元素的，请大佬帮忙解答，非常感谢

Answer 1

你的img写在了一个div下，你在content下写当然没用。把img外层的div干掉即可。或者把text-align写在img外层的那个div下

Answer 2

因为内容比较少，所以你可以试试用弹性盒做，然后让他居中就好了，不知道对不对。