php - 在 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 处显示 Logo 。表示在 center vertical 中开始在酒吧的开头。

但是我想显示 store name在 MAIN DIV 的中间，CEnter horizontal, center vertical .

在上面的代码中，文本没有显示， Logo 的边距也不起作用。

修复了什么

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