2014-01-17 53 views
0

有兩個ID相同。在Safari中它們對齊得很好,但在Chrome中,第一個div偏移大約15px到底部。DIV在Safari中水平對齊,但不在Chrome中

HTML:

<div id="equipe"> 
    <div id="equipe-min"> 
     <img class="aligncenter size-full wp-image-5420" alt="Rodrigo Purchio" src="http://www.frangocombatatadoce.com/wp-content/uploads/2013/07/sobre-nós-04.jpg" style="margin-bottom:-20px;" width="180" height="220"> 
     <h5>Rodrigo Purchio</h5> 
     Designer. Além de marombeiro e nerd, agora é também metido à mestre cuca. Tem 23 anos, trabalha com branding, é formado em Publicidade e Propaganda pela PUC-Rio e tem MBA em Design Estratégico pela ESPM. 
    </div> 
    <div id="equipe-min"> 
     <img class="aligncenter size-full wp-image-5424" alt="Roberta Pacheco" src="http://www.frangocombatatadoce.com/wp-content/uploads/2013/07/sobre-nós-05.jpg" style="margin-bottom:-20px;" width="180" height="220"> 

     <h5>Roberta Pacheco</h5> 
     Estudante de arquitetura. Com toda a família apaixonada por comer bem, cozinha desde pequena e é apaixonada por academia desde cedo por influência dos pais, que sempre incentivaram a prática de atividades físicas. 
    </div> 
</div> 

CSS:

#equipe { 
    text-align: center; 
    margin: 0px auto; 
    width: 100%; 
    float: right; 
    vertical-align:center; 
} 

#equipe-min { 
    text-align:left; 
    width: 300px; 
    height: 500px; 
    background-color: #e3e3e3; 
    display: inline-block; 
    padding: 10px; 
    margin: 5px; 
} 

在小提琴: http://jsfiddle.net/kbhsN/1/

但如果我使用float:留在#隊報分鐘,的DIV得到校正,但留在左邊,我希望他們在封套#equipe居中。

這裏的活頁: http://www.frangocombatatadoce.com/sobre-nos/

回答

0

這是否可以幫助你http://jsfiddle.net/kbhsN/2/

比如果只有一個這些div水平居中。那是你要的嗎?

#equipe-min { 
    /* ... */ 
    margin:5px auto 5px auto; 
    /* ... */ 
} 

UPDATE

記的ID必須是唯一的,並且使用他們兩次,從而改變一類

.equipe-min { 
    /* ... */ 
    margin:5px auto 5px auto; 
    /* ... */ 
} 




<div id="equipe"> 
    <div class="equipe-min"> 
     <img class="aligncenter size-full wp-image-5420" alt="Rodrigo Purchio" src="http://www.frangocombatatadoce.com/wp-content/uploads/2013/07/sobre-nós-04.jpg" style="margin-bottom:-20px;" width="180" height="220"> 
     <h5>Rodrigo Purchio</h5> 
     Designer. Além de marombeiro e nerd, agora é também metido à mestre cuca. Tem 23 anos, trabalha com branding, é formado em Publicidade e Propaganda pela PUC-Rio e tem MBA em Design Estratégico pela ESPM. 
    </div> 
    <div class="equipe-min"> 
     <img class="aligncenter size-full wp-image-5424" alt="Roberta Pacheco" src="http://www.frangocombatatadoce.com/wp-content/uploads/2013/07/sobre-nós-05.jpg" style="margin-bottom:-20px;" width="180" height="220"> 

     <h5>Roberta Pacheco</h5> 
     Estudante de arquitetura. Com toda a família apaixonada por comer bem, cozinha desde pequena e é apaixonada por academia desde cedo por influência dos pais, que sempre incentivaram a prática de atividades físicas. 
    </div> 
</div> 
+0

其實我需要垂直對齊他們在Chrome中。他們是這樣顯示的: http://i.imgur.com/9uLqMb3.png – purchio

+0

對我來說很好用:http://de.tinypic.com/r/2vju7o5/5 using chrome Version 32.0.1700.77 – caramba

+0

對不起,我正在編輯style.css以嘗試使其工作。你能再次看到它是否有效嗎?我在Mac上使用Chrome 32.0.1700.77。 – purchio