html - horizontally - center text in div
Verticalmente y horizontalmente centre la envoltura principal div (5)
La gente puede odiarme por sugerir esto, pero colóquelo dentro de un TD , donde la alineación vertical todavía es factible sin causar ningún daño a usted mismo.
He proporcionado ejemplos de trabajo aquí: http://jsbin.com/ezolu3/edit
El marcado sigue:
<table id="vCent">
<tbody>
<tr>
<td valign="center">
<div id="foo">
<p>Using tables incorrectly is wrong, without question. But sometimes there are other things that are more wrong - "wrongerer," if you will. Causing yourself unnecessary frustration trying to get an element to center itself vertically, for example, is one of those <em>wrongerer</em> things. Don''t bother, just go with what works.</p>
</div>
</td>
</tr>
</tbody>
</table>
Posible duplicado:
¿Cómo centrar DIV en DIV?
Ahora intento
<html>
<head>
<title>?????????????????</title>
<style type="text/css">
body
{
margin-left: auto;
margin-right:auto;
}
#wrap
{
background: black;
margin-left: auto;
margin-right:auto;
height:450px;
width:450px;
position:absolute;
top:50%;
right:50%;
left:50%;
margin-top:-225px;
}
</style>
</head>
<body>
<div id="wrap">
Hello
</div>
</body>
</html>
?????
Prueba esto:
<html>
<head>
<title>?????????????????</title>
<style type="text/css">
#content
{
background: black;
margin: -225px;
height: 450px;
width: 450px;
}
#wrap
{
height: 0px;
width: 0px;
position:absolute;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
Hello
</div>
</div>
</body>
</html>
Este tutorial cubre un método que me ha funcionado bien en el pasado.
vertical-align no funciona de la manera en que la mayoría de los principiantes esperan que funcione.
Here hay un tutorial explicando la situación. Parece que quieres el Método 1.
<html>
<head>
<title>?????????????????</title>
<style type="text/css">
.ui-container
{
background: red;
}
.ui-wrapper
{
margin: auto;
background: black;
height:450px;
width:450px;
color: red;
}
</style>
</head>
<body>
<div class="ui-container">
<div class="ui-wrapper">
<p>Hello</p>
</div>
</div>
</body>
</html>