otra - poner texto al lado de una imagen html
alinee las imágenes una al lado de la otra en html (7)
Quiero 3 imágenes lado a lado con subtítulos, en este momento tengo 3 imágenes que van de arriba a abajo, con el título a la izquierda, no en el centro. ¿Cómo hago que las imágenes aparezcan una al lado de la otra con una leyenda en el medio? Gracias.
<div class="image123">
<img src="/images/tv.gif" height="200" width="200" style="float:left">
<p>This is image 1</p>
<img class="middle-img" src="/images/tv.gif"/ height="200" width="200">
<p>This is image 2</p>
<img src="/images/tv.gif"/ height="200" width="200">
<p>This is image 3</p>
</div>
En tu CSS:
.image123{
float:left;
}
Intenta usar este formato
<figure>
<img src="img" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
Esto le dará una leyenda real (simplemente agregue el 2do y 3er imgs usando Float:left como otros sugirieron)
No estoy muy seguro de lo que quiere decir con "el pie de foto en el medio", pero aquí hay una solución para que sus imágenes aparezcan una al lado de la otra, utilizando la excelente display:inline-block :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/350x150" height="200" width="200" />
<p>This is image 1</p>
</div>
<div class="container">
<img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200" />
<p>This is image 2</p>
</div>
<div class="container">
<img src="http://placehold.it/350x150" height="200" width="200" />
<p>This is image 3</p>
</div>
</div>
</body>
</html>
Así es como lo haría, (sin embargo, usaría una hoja de estilo externa para este proyecto y todos los demás. Simplemente hace que las cosas sean más fáciles de trabajar. También este ejemplo es con html5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<figure>
<img src="http://placehold.it/350x150" height="200" width="200">
<figcaption>This is image 1</figcaption>
</figure>
<figure>
<img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200">
<figcaption>This is image 2</figcaption>
</figure>
<figure>
<img src="http://placehold.it/350x150" height="200" width="200">
<figcaption>This is image 3</figcaption>
</figure>
</div>
</body>
</html>
¿Quieres decir algo como esto?
<div class="image123">
<div class="imgContainer">
<img src="/images/tv.gif" height="200" width="200"/>
<p>This is image 1</p>
</div>
<div class="imgContainer">
<img class="middle-img" src="/images/tv.gif"/ height="200" width="200"/>
<p>This is image 2</p>
</div>
<div class="imgContainer">
<img src="/images/tv.gif"/ height="200" width="200"/>
<p>This is image 3</p>
</div>
</div>
con el estilo imgContainer como
.imgContainer{
float:left;
}
También vea este jsfiddle .
Prueba esto
CSS
.imageContainer {
float: left;
}
p {
text-align: center;
}
HTML
<div class="image123">
<div class="imageContainer">
<img src="/images/tv.gif" height="200" width="200" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="/images/tv.gif"/ height="200" width="200" />
<p>This is image 2</p>
</div>
<div class="imageContainer">
<img src="/images/tv.gif"/ height="200" width="200"/>
<p>This is image 3</p>
</div>
</div>
Sugiero usar un contenedor para cada img p como este:
<div class="image123">
<div style="float:left;margin-right:5px;">
<img src="/images/tv.gif" height="200" width="200" />
<p style="text-align:center;">This is image 1</p>
</div>
<div style="float:left;margin-right:5px;">
<img class="middle-img" src="/images/tv.gif/" height="200" width="200" />
<p style="text-align:center;">This is image 2</p>
</div>
<div style="float:left;margin-right:5px;">
<img src="/images/tv.gif/" height="200" width="200" />
<p style="text-align:center;">This is image 3</p>
</div>
</div>
Luego aplique float:left a cada contenedor. Agrego 5px margin right 5px margin right para que haya un espacio entre cada imagen. También siempre cierra tus elementos. Tal vez en la etiqueta html img no es importante cerrar pero en XHTML sí.
También un consejo amistoso. Trate de evitar los estilos en línea tanto como sea posible. Eche un vistazo aquí:
html
<div class="image123">
<div>
<img src="/images/tv.gif" />
<p>This is image 1</p>
</div>
<div>
<img class="middle-img" src="/images/tv.gif/" />
<p>This is image 2</p>
</div>
<div>
<img src="/images/tv.gif/" />
<p>This is image 3</p>
</div>
</div>
css
div{
float:left;
margin-right:5px;
}
div > img{
height:200px;
width:200px;
}
p{
text-align:center;
}
En general, se recomienda utilizar hojas de estilo vinculadas porque:
- Pueden ser almacenados en caché por los navegadores para el funcionamiento
- En general, mucho más fácil de mantener para una perspectiva de desarrollo