我的div没有水平对齐

Question

我正在使用带显示的两个div：inline-block但这些不是水平对齐。

如果我使用相同的信息，文本和图像制作div，则div对齐，但如果文本多于另一个，则不在某些div中对齐。

我附上示例图片并实现了代码。

感谢您的帮助

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 certificados 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>  

Answer 1

尝试vertical-align: top

Fiddle

Answer 2

您编写代码的方式可能更好..您可以使用各种方法修复它。看看我的选择。

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 certificados 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> 

Answer 3

您已在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; }