HTML - Agregar texto debajo de una imagen

Buenas a todos, quisiera me ayudaran con lo siguiente:

Estoy organizado unos logos de marcas de una pagina web y necesito que debajo de cada logo tenga un texto con una breve descripción.

Este es parte el código que estoy utilizando.


Lo estaba haciendo editando las imágenes, pero al momento de visualizarlas en la pagina, unas quedan mas grandes que las otras y no entiendo porque, si las edite con mismo tamaño de pixeles.

Agradezco alguien pueda ayudarme, ya que no tengo mucho conocimiento en HTML.

Adjunto una imagen para aclarar.

Hola,

he estado mirando la web y veo que todas las imágenes tienen el mismo tamaño lo que pasa que unas tienes más espacio en blanco que otras o que tiene el fondo transparente pero por lo demás..

Si te refieres al apartado de "TIENES UNA TAREA. NOSOTROS, LA SOLUCIÓN.", las imágenes no son del mismo tamaño...

Si quieres que independientemente del tamaño de la imagen quieres que se vean "bien" dentro de un <div> tienes que darle a este último una altura y anchura fija (with:200px;height:130px por ejemplo) y un overflow:hidden, que lo que hace es ocultar el resto de contenido dentro de eses div..

Si no es lo que necesitas, di en qué sección quieres modificar estas imágenes o añade parte del código para poder solucionarlo ok? ;)

Hola, Como dijiste, las imágenes de los recuadros que están antes del apartado tienen mismo tamaño, pero no se si lo que dices de los espacios en blanco y o formato png intervenga aquí. Intente cambiando style="height:36px por style="with:150px;height:50px", y las imágenes si quedan de igual tamaño pero el recuadro blanco unos quedan mas grandes que otros. Sinceramente no tengo ni la menor idea de porque pasa esto.

La pagina es de la empresa donde trabajo y me pidieron arreglar estas cosas, pero se poco de programación, y ademas no soy el creador del sitio web. No se si en la parte del codigo ...style="height:30px... tenga que ver que unos tienen 20px, 30px, 46px, etc. de que al momento de cambiarlo por style="with:150px;height:50px" los recuadros blancos queden mas grandes que otros.

Te comparto las lineas de código de la primera parte, ya con eso me guiaría para arreglar los demás.

<div id="hi_page" class="container">
<div id="hi_content_and_sidebar_container">
<div id="hi_content">
<div id="hi_content_margin"class="container-fluid">
<div style="height:0px;width:0px;overflow:hidden;-webkit-margin-top-collapse: separate;"></div>
<div class="hi_productos_html_row0 row">
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column00">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/sata" title="SATA"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-SATA.png" style="height:36px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column01">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/urrea" title="URREA"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-URREA.png" style="height:30px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column02">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/armadura" title="ARMADURA"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-ARMADURA.png" style="height:70px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column03">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/karcher" title="KÄRCHER"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-KARCHER.png" style="height:46px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-lg-block visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column04">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/ridgid" title="RIDGID"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-RIDGID.png" style="height:40px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column05">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/bosch" title="BOSCH"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-BOSCH.png" style="height:46px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column06">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/amenabar" title="AMENABAR"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-AMENABAR.png" style="height:60px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column07">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/skil" title="SKIL"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-SKIL.png" style="height:40px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-lg-block visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column08">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/west-arco" title="WEST-ARCO"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-WESTARCO.png" style="height:40px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column09">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/yale-diferenciales" title="YALE-DIFERENCIALES"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-YALE.png" style="height:36px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column010">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/mitutoyo" title="MITUTOYO"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-MITUTOYO.png" style="height:40px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column011">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/stihl" title="STIHL"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-STIHL.png" style="height:30px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-lg-block visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column012">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/fluke" title="FLUKE"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-FLUKE.png" style="height:20px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column013">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/jacobs" title="JACOBS"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-JACOBS.png" style="height:40px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column014">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/vicsa-steelpro" title="VICSA STEELPRO"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-STEELPRO.png" style="height:50px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column015">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:15px;"><a href="marcas/metabo" title="METABO"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-METABO.png" style="height:30px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-lg-block visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column016">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/life-respiradores" title="LIFE RESPIRADORES"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-LIFE.png" style="height:70px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column017">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;line-height:20.88px;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/dewalt" title="DEWALT"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-DEWALT.png" style="height:46px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column018">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/soliplast" title="SOLIPLAST"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-SOLIPLAST.png" style="height:40px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column019">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/uyustools" title="UYUSTOOLS" ><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-UYUSTOOLS.png" style="height:56px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-lg-block visible-sm-block visible-md-block visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column020">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="/marcas/saga" title="SAGA"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-SAGA.png" style="height:60px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="post_column col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="hi_productos_html_column021">
<div class="html_content" style="font-family:Times New Roman;font-size:12px;"><p style="text-align:Center;font-family:Times New Roman;font-size:12px;"><span style="font-family:&quot;Calibri&quot;;font-size:16px;"><a href="marcas/itw" title="ITW"><img src="http://herramientasindustrialesas.com/images/logos-marcas/Logo-ITW.png" style="height:32px;"></a></span></p></div>
</div>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-xs-block">
</div>
</div>