Question

有两个具有相同ID。在Safari中它们对齐很好，但在Chrome中，第一个div偏移约15px到底部。

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/

但如果我在＃equipe-min上使用float：left，则DIV会对齐，但保持在左侧，我希望它们在包装器#equipe中居中。

这是实时页面： http://www.frangocombatatadoce.com/sobre-nos/

Answer 1

这可能会对您有所帮助http://jsfiddle.net/kbhsN/2/

如果只有一个div，则水平居中。这就是你想要的吗？

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

<强>更新

请注意，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>

DIV在Safari中水平对齐，但不在Chrome中

1 个答案: