Trucos de centrado de CSS [cerrado]

StackOverflow https://stackoverflow.com/questions/148251

Pregunta

Mi ecuación favorita para centrar un elemento xhtml usando solo CSS es la siguiente: 

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

También existe el margen más simple: método automático en los navegadores que lo admiten. ¿Alguien más tiene formas difíciles de forzar que el contenido se muestre centrado en su contenedor? (puntos de bonificación por centrado vertical)

edit - oops, olvidaste la parte 'negativa' de una en el margen izquierdo. arreglado.

¿Fue útil?

Solución

Stick con Margen: 0 automático; para alineación horizontal; Si necesita alineación vertical, use position: absolute; arriba: 50%; margen superior: - (ancho / 2) px; Sin embargo, tenga en cuenta que si su contenedor tiene más ancho que su pantalla, una parte de él se caerá de la pantalla en el lado izquierdo usando el método Posición: absoluto.

Otros consejos

div #centered{
 margin: 0 auto;
}

parece ser el más confiable de mi experiencia.

Bueno, eso parece una exageración masiva, debo decir. Tiendo a configurar el contenedor en text-align: center; para navegadores antiguos, margin: auto; para navegadores modernos, y dejarlo así. Luego reinicie la alineación de texto en el elemento (si contiene texto).

Por supuesto, algunas cosas necesitan configurarse como bloque, y los anchos necesitan configurarse ... ¿Pero qué diablos estás tratando de diseñar que necesite eso tanto pirateo? 

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Margen: las funciones automáticas en todos los navegadores siempre que se asegure de que IE esté en modo estándar.

Es más exigente que los demás y requiere que su doctype sea el primero en su documento, lo que significa que no hay espacios en blanco (espacio, tabulaciones o saltos de línea) antes de él.

Si haces eso, margen: ¡automático es el camino a seguir! :)

solo una nota de que el margen: auto; El método solo funciona si el navegador puede calcular el ancho del elemento a centrar y el ancho del contenedor principal. en muchos casos configurando ancho: auto; Funciona, pero en algunos no.

Este es un marcador útil para trucos CSS

http://css-discuss.incutio.com/

Contiene lotes of Centrado trucos también.

El posicionamiento absoluto con un enfoque del 50% tiene el grave efecto secundario de que si la ventana del navegador es más estrecha que el elemento, parte del contenido aparecerá en el lado izquierdo del navegador, sin forma de desplazarse hacia él.

Apéguese a los márgenes automáticos: son mucho más confiables.

Si está trabajando en el modo Estándar (que debería ser), entonces son compatibles con todos los navegadores que probablemente le interesen.

Puede usar el truco de alineación de texto si realmente necesita ser compatible con Internet Explorer 5.5 y versiones anteriores. 

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Esto funciona muy bien en todos los navegadores habituales. Como ya se mencionó margin: 0 auto; no funcionará en todas las versiones semi-actuales de IE.

Prueba esto; No sé si funciona en IE, funciona bien en Fx. Centra un bloque DIV en la página usando solo CSS (sin JavaScript), sin margen automático y el texto dentro del bloque DIV todavía está alineado a la izquierda. Solo estoy tratando de averiguar si el centrado vertical también podría funcionar de esa manera, pero hasta ahora sin éxito. 

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top