Inicio > 1 > CSS Vertical align

CSS Vertical align

En la etiqueta HTML td tiene un atributo llamado “valign”, que puede alinear el contenido verticalmente. CSS no tienen tal atributo, por lo que tiene que hacer un poco de magia para lograr tal resultado.  Utilizando el método descrito a continuación usted será capaz de alinear un elemento verticalmente en cualquier contenedor de altura.

Ejemplo:

<html>
<head>
    <title>DEMO: CSS vertical align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
		.v-outer {
			display: table;
			#position: relative;
			overflow: hidden;
			height: 100px;
			background: black;
			color: white;
			width: 100%;
		}

			.v-middle {
				display: table-cell;
				#position: absolute;
				#top: 50%;
				vertical-align: middle;
			}

				.v-inner {
					#position: relative;
					#top: -50%;
				}
	</style>
</head>

<body>

	<div class="border v-outer">
	<div class="v-middle">
	<div class="v-inner">
	...content...
	</div>
	</div>
	</div>

</body>
</html>
Anuncios
Categorías:1
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: