2014-01-17 3 views
0

Имеют два одинаковых идентификатора. В Safari они отлично сочетаются, но в Chrome первый div смещен примерно на 15 пикселей вниз.DIVs горизонтально выровнены в 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; 
} 

На Fiddle: http://jsfiddle.net/kbhsN/1/

Но если я использую поплавок: слева на # Equipe-мин, дивы получить выровнены, но оставайтесь слева, и я хочу, чтобы они были центрированы в оболочке #equipe.

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

ответ

0

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

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

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

UPDATE

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

.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 с использованием chrome Версия 32.0.1700.77 – caramba

+0

Извините, я редактировал style.css, чтобы попытаться заставить его работать. Не могли бы вы увидеть снова, если это сработает? Я использую Chrome 32.0.1700.77 на Mac. – purchio

Смежные вопросы