Мой div не выровнен по горизонтали

Я использую два div с дисплеем: inline-block, но они не выровнены по горизонтали.Мой div не выровнен по горизонтали

Если я делаю div с одинаковой информацией, текстом и изображениями, выровняйте div, но если текст больше, чем другой, не выровненный в некотором div.

Прилагаю образ образца и реализованный код.

Спасибо за помощь

enter image description here

CSS:

.serv_op{ 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px;  
    border-radius: 20px; 
    border: 1px solid #999; 
    height:330px; 
    text-align:center; 
    background:#E2E2E1; 
    display:inline-block; 
    width:350px; 
}

HTML:

<div align="center" class="serv_op"> 
    <br> 
    <img src="img/certificado.jpg"> 
    <div style="clear:both"></div> 
    <div class="serv_titulo_op">CERTIFICADOS</div> 
    <div style="clear:both"></div> 
    <div class="serv_text_op">Estamos certiﬁcados por la SUPER INTENDENCIA DEVIGILACIA Y SEGURIDAD PRIVADA </div> 
</div> 

<div align="center" class="serv_op"> 
    <br> 
    <img src="img/certificado2.jpg"> 
    <div style="clear:both"></div> 
    <div class="serv_titulo_op">UN AÑO DE GARANTÍA</div> 
    <div style="clear:both"></div> 
    <div class="serv_text_op">En Security On siempre estamos pensando en su bienestar y en el de su establecimiento, por eso te ofrecemos un año de garantía por defecto de fábrica.</div> 
</div>

источник

2014-11-10 user3810167

дива начать новую линию, когда их сгенерированы, попробуйте использовать пролет вместо этого, который делает not.http://www.w3schools.com/tags/tag_span.asp –

@IanWise OP изменяет стиль отображения на 'inline-block'. – dashtinejad

мой плохой, неважно. haha –

Попробуйте vertical-align: top

Fiddle

источник

2014-11-10 03:50:19 JunM

Спасибо за ваш ответ – user3810167

Способ, которым вы написали код, может быть лучше .. Вы можете исправить его различными подходами. См. Мой вариант.

http://jsfiddle.net/kiranvarthi/Lyz505ds/1/

<div class="serv_op"> 
    <img src="img/certificado.jpg" /> 
    <div class="serv_titulo_op">CERTIFICADOS</div> 
    <div class="serv_text_op">Estamos certiﬁcados por la SUPER INTENDENCIA DEVIGILACIA Y SEGURIDAD PRIVADA </div> 
</div> 

<div class="serv_op"> 
    <img src="img/certificado2.jpg" /> 
    <div class="serv_titulo_op">UN AÑO DE GARANTÍA</div> 
    <div class="serv_text_op">En Security On siempre estamos pensando en su bienestar y en el de su establecimiento, por eso te ofrecemos un año de garantía por defecto de fábrica.</div> 
</div>

источник

2014-11-10 03:56:03

Спасибо за ваш ответ – user3810167

вы должны внести изменения в вашем CSS части

.serv_op{ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 1px solid #999; height:330px; text-align:center; background:#E2E2E1; display:inline-block; width:350px; float:left; margin-left:10px; }

источник

2014-11-10 04:47:13 priya

Мой div не выровнен по горизонтали

ответ

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