Insertar 3 textos en la misma línea código HTML
cathy
-
nEm3sis Mensajes publicados 722 Estado Miembro -
nEm3sis Mensajes publicados 722 Estado Miembro -
Hola,
He logrado poner 3 fotos en la misma línea: alineado a la izquierda, centrado, alineado a la derecha. Aquí está mi código HTML
<p style="text-align:center">
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>
<img src="http://Logo-100x100_full.gif" style="float:right;" />
<img src="http://picture_66458.png" />
</p>
Siguiendo el mismo principio, quiero hacer lo mismo con texto pero no puedo. He mirado muchos tutoriales pero no he encontrado respuesta.
La idea es poner un texto debajo de cada foto. A la izquierda, centrado, a la derecha.
¿Alguien tiene la solución?
Gracias
Cathy
He logrado poner 3 fotos en la misma línea: alineado a la izquierda, centrado, alineado a la derecha. Aquí está mi código HTML
<p style="text-align:center">
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>
<img src="http://Logo-100x100_full.gif" style="float:right;" />
<img src="http://picture_66458.png" />
</p>
Siguiendo el mismo principio, quiero hacer lo mismo con texto pero no puedo. He mirado muchos tutoriales pero no he encontrado respuesta.
La idea es poner un texto debajo de cada foto. A la izquierda, centrado, a la derecha.
¿Alguien tiene la solución?
Gracias
Cathy
7 respuestas
<style type="text/css"> .left-col { float: left; width: 100px; } .mid-col { float: left; width: 100px; } .right-col { width: 100px; } </style> <div class="left-col"> <img><br> blabla1 </div> <div class="mid-col"> <img><br> blabla2 </div> <div class="right-col"> <img><br> blabla3 </div> los width en el estilo son opcionales
Si una respuesta es útil piensa en el +1
Si has resuelto tu problema cuéntanos y marca tu tema como resuelto.
Gracias por tu respuesta.
¿Es el único medio? nunca he hecho una tabla.
Cuando intento lo básico, me lo envía a la línea. Así que está bien a la izquierda, al centro y a la derecha, pero en 3 líneas.
<h4 align="center">Título alineado al centro</h4>
<h4 align="left">Título alineado a la izquierda</h4>
<h4 align="right">Título alineado a la derecha</h4>
si es el único medio, me lanzo....
¿Es el único medio? nunca he hecho una tabla.
Cuando intento lo básico, me lo envía a la línea. Así que está bien a la izquierda, al centro y a la derecha, pero en 3 líneas.
<h4 align="center">Título alineado al centro</h4>
<h4 align="left">Título alineado a la izquierda</h4>
<h4 align="right">Título alineado a la derecha</h4>
si es el único medio, me lanzo....
<table style="width:100%" border="0">
<tr><td>
<img src="IMAGE01">
</td><td>
<img src="IMAGE02">
</td><td>
<img src="IMAGE03">
</td></tr>
<tr><td>
TEXTO01
</td><td>
TEXTO02
</td><td>
TEXTO03
</td></tr></table>
<tr><td>
<img src="IMAGE01">
</td><td>
<img src="IMAGE02">
</td><td>
<img src="IMAGE03">
</td></tr>
<tr><td>
TEXTO01
</td><td>
TEXTO02
</td><td>
TEXTO03
</td></tr></table>
Gracias Kisscool
funciona. Sin embargo, incluso si <table style="width:100%" border="0"> mi imagen de la izquierda no está pegada a la derecha, tengo que ponerle un 120 - 130%
¿es normal?
funciona. Sin embargo, incluso si <table style="width:100%" border="0"> mi imagen de la izquierda no está pegada a la derecha, tengo que ponerle un 120 - 130%
¿es normal?
Intenta quizás jugar con las hojas de estilo para ajustar el espacio entre tus imágenes con (padding y margin) y ver qué tal queda.
Hola a todos,
La otra opción es hacer <style>display:inline;</style> para las imágenes o bien crear una clase para estas fotos:
La felicidad es la única cosa que se puede dar sin tenerla.
La otra opción es hacer <style>display:inline;</style> para las imágenes o bien crear una clase para estas fotos:
. photo { /* fotos lado a lado */ display:inline; }luego en lugar de <img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>hacer:
<img src="http://ebsd_logo_100x100.jpg" class="photo"/><br /> Leyenda 1 Leyenda 2 etc...
La felicidad es la única cosa que se puede dar sin tenerla.
Además, el texto no está del todo centrado debajo de la imagen, ¿es posible hacerlo?
/!\ Para información complementaria, de hecho, solo funciona en IE y Opera. En Chrome y Firefox, la última imagen está a continuación.
¿así está mejor?
<style type="text/css"> .col { float: left; width: 33%; min-width: 160px; text-align: center } .clear { clear: both; } </style> <div class="col left"> <img src="..."><br> blabla1 </div> <div class="col mid"> <img src="..."><br> blabla2 </div> <div class="col right"> <img src="..."><br> blabla3 </div> <div class="clear"></div>para el problema de la última imagen fue un olvido de mi parte :/
el min-width debe ajustarse para evitar que los divs se superpongan (si la página es demasiado pequeña)
pd: las clases css left, mid y right no se utilizan por el momento, pero podrían servir si quieres aplicar estilos exclusivamente a ciertas columnas