在div中心垂直和水平中心對齊標簽和圖像

Question

在開始時對齊圖像並

我正在使用以下代碼

<div id="ringName" style="background-color: #701344;height: 50px; border-radius: 4px;  width: 800px; ">
         <img style="margin-top:5; margin-left:20;" src="images/about_us_logo.png" alt="" width="40" height="40" /> 

     <div  style="font-size: 24px; color: #FFF; text-align: center; line-height: 50px; height: 50px; border-radius: 4px;  width: 760px; " ><?php echo $store['name'] ?></div>   
    </div>

我想做的是，制作一個width 800px , height 50px的Voilet條。

所述<img>標記將在像余量在左5和余量頂部5.手段在開始顯示標志center vertical於所述桿的開始。

但是我想在MAIN DIV的中間顯示store name ， CEnter horizontal, center vertical 。

在以上代碼中，“文字”未顯示，徽標的邊距也不起作用。

有哪些修復

Answer 1

這是調試后的代碼： http : //jsfiddle.net/u7G2M/ 。

HTML：

<div id="ringName">
    <img style="" src="http://placehold.it/40x40" alt="" /> 
    <div>Store Name</div>
</div>

CSS：

 #ringName {
    background-color: #701344;
    height: 50px; 
    border-radius: 4px;  
    width: 800px;
}

#ringName > img {
    margin-top:5px; 
    margin-left:20px; 
    width: 40px;
    height: 40px;
}

#ringName > div {
    display: inline-block;
    font: 24px/50px Sans-Serif;
    color: #fff; 
    text-align: center; 
    vertical-align: top;
    width: 700px;
}

Answer 2

.className{

    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;

}