DIVs выровнены по горизонтали в Safari, но не в Chrome

0

У вас два одинаковых идентификатора. В Safari они отлично сочетаются, но в Chrome первый div смещен примерно на 15 пикселей вниз.

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: left на # equipe-min, DIVs выравниваются, но остаются слева, и я хочу, чтобы они были центрированы в оболочке #equipe.

Вот живая страница: http://www.frangocombatatadoce.com/sobre-nos/

Теги:
vertical-alignment

1 ответ

0

это может помочь вам http://jsfiddle.net/kbhsN/2/

чем те divs центрированы по горизонтали, если есть только один. Это то что ты хочешь?

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

ОБНОВИТЬ

обратите внимание, что идентификатор должен быть уникальным, и вы используете его дважды, чтобы изменить его на класс

.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. Они отображаются так: i.imgur.com/9uLqMb3.png
  • 0
    отлично работает для меня: de.tinypic.com/r/2vju7o5/5 с использованием Chrome версии 32.0.1700.77
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню