pantalla - Centrar un div en CSS
div flotante centrado (10)
Cree una tabla con una sola fila y tres columnas, establezca el ancho izquierdo y derecho al 100% y listo, el centro se centra automáticamente
Estoy tratando de centrar el Newslider (en el contenedor inferior de Div) en esta página:
http://www.luukratief-design.nl/dump/parallax/index.html
Ya tengo text-align: center;
Aún así no funciona.
¿Alguna sugerencia?
El text-align: center; solo centra los contenidos en línea del elemento, no el elemento en sí mismo.
Si se trata de un elemento de bloque (un div es), debe establecer margin: 0 auto; De lo contrario, si se trata de un elemento en línea , debe establecer text-align: center; en su elemento padre en su lugar.
El margin: 0 auto; establecerá el margen superior e inferior en 0 y el margen izquierdo y derecho en auto (del mismo tamaño) para que se ubique automágicamente en el centro. Esto solo funciona si el elemento de bloque en cuestión tiene un width conocido (ya sea fijo o relativo), de lo contrario no puede encontrar dónde comenzar y terminar.
Intenta agregar esto al estilo.
margin-left: auto;
Prueba esto:
#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}
Eso debería centrar el div en tu pie de página.
Siempre que se establezca el ancho, y pones un DOCTYPE apropiado,
Prueba esto:
Margin-left: auto;
Margin-right: auto;
Espero que esto ayude
Use text-align: center para el contenedor, display: inline-block para el wrapper div, y display: inline para que el contenido div centre horizontalmente el contenido que tiene un ancho indefinido en todos los navegadores:
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
/* Use inline-block for the wrapper */
.wrapper { display: inline-block; }
.content { display:inline; }
.container { text-align:center; }
/*Media query for IE7 and under*/
@media,
{
.wrapper { display:inline; }
}
</style>
<title>Horizontal Centering Test</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
test text
</div>
</div>
</div>
</body>
</html>
añadir
margin:auto;
siempre uso
<div align="center">Some contents......</div>
text-align no debe usarse para centrar un elemento de bloque. (excepto en IE6, pero esto es un bug )
Tienes que arreglar el ancho del bloque, luego usa margin: 0 auto;
#block
{
width: 200px;
border: 1px solid red;
margin: 0 auto;
}
y
<div id="#block">Some text... Lorem ipsum</div>
De una sola mano :
<div align="center">you content</div>
Mejor manera:
<div id="myDiv">you content</div>
CSS para myDIV:
#myDiv{
margin:0px auto;
}