¿Es posible texto pie foto debajo a la izquirda de la foto, ambos centrados en capa?

Maicro · #1 (**permalink**) 09/12/2010, 14:14

Hola buenas. De repente se me ha planteado un dilema con CSS y no lo he resuelto en esta tarde. A ver, por favor, si hay alguien que sepa la solución.

La intención es crear un CSS estándar para las fotos de una una página, las cuales se hayan colgadas por Internet, no el hosting de la página. La intención es alinear esas fotos en el centro de la página. Cosa fácil con este CSS a la capa que contiene la foto:

Código:

div.internet {
	text-align: center;
}

Añado la información de que las dimensiones de las fotos serán diferentes unas de otras.

Pues bien, lo que ando buscando es que el párrafo que contendrá el texto de la pie de foto no se alinee también al centro, sino a la izquierda y que el borde izquierdo del párrafo coincida con el borde izquierdo de la foto en el eje X. Si todas las fotos tuviesen el mismo ancho sería fácil dando un padding al párrafo, pero, como he dicho, las dimensiones de las fotografías cambian.

¿A alguien se le ocurre cómo hacerlo? Muchas gracias. Saludos.

ArturoGallegos · #2 (**permalink**) 09/12/2010, 15:52

y si nos muestras el html también?

Maicro · #3 (**permalink**) 09/12/2010, 16:05

Por supuesto ;)

Código HTML:

<div class="internet">
	<img class="internet" src="http://img840.imageshack.us/img.jpg" width="800" height="600" alt="Texto alternativo" />
	<p class="piefotointernet">Pie de foto.</p>
</div>

Y el CSS

Código:

img {
	border: none;
	margin: 0;
	padding: 0;
}
div.internet {
	text-align: center;
}
img.internet {
	border: 2px solid #ffffff;
}
p.piefotointernet {
	text-align: left;
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}

Gracias.

maycolalvarez · #4 (**permalink**) 09/12/2010, 16:10

FALSO:

Cita:

Iniciado por Maicro

Código:

div.internet {
    text-align: center;
}

allí no estás centrando capas con css, sino que estás centrando el texto.

para centrar capas con CSS solo basta:

Código CSS:

Ver originaldiv.internet{
    margin: 0px auto;
}

también dispones de CSS float para hacer que la imagen se ajuste con el texto en a izquierda o derecha, suerte

Maicro · #5 (**permalink**) 09/12/2010, 16:39

Eso creía yo y empecé con

Código:

margin: 0 auto;

Ya que incluso es así como centro el contenido de la página.

Pero, míra lo que pasa:

Código:

img {
	border: none;
	margin: 0;
	padding: 0;
}
div.internet {
	border: 2px solid #ffffff;
	margin: 0 auto;
}
img.internet {
	border: 2px solid #ffffff;
}
p.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
span.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}

Código HTML:

<div class="internet">
	<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
	<p class="piefotointernet">Avatar de Maicro.</p>
</div>
<p>Bla, bla bla.</p>
<div class="internet">
	<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
	<br><span class="piefotointernet">Avatar de Maicro.</span>
</div>

Resultado:

Maicro · #6 (**permalink**) 09/12/2010, 16:40

Bueno, y si pongo la imagen con float se sale del borde blanco grande.

¡Ah! Gracias ;)

Maicro · #7 (**permalink**) 09/12/2010, 17:06

Más claro: www.maicro.es/centrado.htm

Con este código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head >
	<title>Centrado</title>
	<meta name="generator" content="Notepad++" />
	<style type="text/css">
body {
	color: #cccccc;
	background: #000000;
	font-family: Verdana, Arial, Helvetica, Helv, sans-serif;
}
div.internet {
	border: 2px solid #ffffff;
	margin: 0 auto;
}
img.internet {
	border: 2px solid #ffffff;
}
p.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
span.piefotointernet {
	font-size: 0.6em;
	text-indent: 0em;
	margin: 2px 0px 0px 0px;
}
	</style>
</head>
<body>
	<p>Bla, bla, bla.</p>
	<div class="internet">
		<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
		<p class="piefotointernet">Avatar de Maicro.</p>
	</div>
	<p>Ble, ble, ble.</p>
	<div class="internet">
		<img class="internet" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="50" height="50" alt="Maicro." />
		<span class="piefotointernet">Avatar de Maicro.</span>
	</div>
	<p>Bli, bli, bli.</p>
</body>
</html>

El margin: 0 auto; de la capa internet no funciona. ¿Alguien lo entiende? Gracias.