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;

}

将标签和图像对齐在div中心垂直和中心水平

2 个答案: