html - 将第二个 div 置于中心失败

Question

有以下代码，M 试图将第二个 div 放在中心，但不知何故它没有出现，我不想在减号中使用边距:

这里是html和css

 <div id="headerLeft">
    <div id="imgsection">
        <div class="logo"></div>
    </div>    
    <div id="usersection">
        <div class="user">Sign</div>
        <div class="location">Find</div>
    </div>
</div>

我的 CSS

#headerLeft {
    width:45%;
}
#headerLeft #imgsection {
    width:150px;
}
#headerLeft #imgsection .logo {
    background: url('../img/logo.png') no-repeat;
    background-size: cover;
    width:88px;
    height:71px;
    width:100px;   
}

#headerLeft #usersection {
    float:right; 
    width:200px;
    margin: auto;
}
#headerLeft #usersection .user {
    width:80px;
    float:left;
}
#headerLeft #usersection .location {
    width:80px;
    float:left;
}

检查这个 fiddle

http://jsfiddle.net/CF6kX/

第二个被id: usersection覆盖的需要介于两者之间，目前它出现在底部

Answer 1

在图片部分添加属性 float:left ，增加headerleft宽度下面是代码

  #headerLeft {
            width: 58%;
        }
        #headerLeft #imgsection {
            width:150px;
float: left;
        }
        #headerLeft #imgsection .logo {
            background: url('../img/logo.png') no-repeat;
            background-size: cover;
            width:88px;
            height:71px;
            width:100px;   
        }

        #headerLeft #usersection {
            float:right; 
            width:200px;
            margin: auto;
        }
        #headerLeft #usersection .user {
            width:80px;
            float:left;
        }
        #headerLeft #usersection .location {
            width:80px;
            float:left;
        }