necesita ayuda centrado CSS con posicionamiento absoluto
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Nunca estuve totalmente satisfecho con mis diversas soluciones para centrar contenido en una página web. la etiqueta <center> ha quedado en desuso a mediados del siglo XVIII, pero no veo una alternativa razonable. Específicamente, lo que quiero es tener un DIV padre que esté centrado, pero contra cuya esquina superior izquierda pueda establecer las cosas & Quot; absolutamente & Quot ;.
¿Hay alguna manera de lograr esto sin usar window.onresize javascript que recuerda todo? Parece una idea bastante sencilla ... Quiero que las cosas estén absolutamente posicionadas, solo quiero que la coordenada 0,0 sea relativa a algo diferente a la esquina superior izquierda de la ventana del navegador.
En este momento, lo que hago es establecer un div para centrar su contenido y luego hacer fideos con un posicionamiento relativo, pero eso es muy cansador porque los objetos relativos se empujan entre sí de formas que no quiero.
Cualquiera y todos los pensamientos sobre esto son muy apreciados.
Solución
¿Es esto lo que estás buscando?
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>
Otros consejos
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Solo código de ejemplo, pero cualquier elemento .child estaría en 0,0 del contenedor
Cualquier elemento en una posición absoluta se posicionará absolutamente a su padre relativo a la posición más cercano. Si un elemento no tiene un padre con posición relativa, solo usa el documento. A continuación se muestra un ejemplo sin clases (se agregaron algunos estilos de color y ancho para mayor claridad).
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
Si te quedas con position: absolute;, configura el div en el que quieres que se coloquen las cosas para que tenga position: relative; para que quede en el contexto de posicionamiento de cualquier elemento hijo.
Para centrar un div absolutamente posicionado necesita saber su ancho, luego use el siguiente CSS:
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
Y el HTML:
<div id="wrapper">
<div id="child">
....
</div>
</div>
Puede ajustar el ancho y el margen izquierdo según lo necesite (el margen izquierdo negativo debe ser la mitad del ancho del div que está centrando, por ejemplo, #child.
Como otras personas han mencionado, usar margin: 0 auto; en un elemento con un ancho establecido lo centrará.
Una buena manera de centrar las cosas es usar " margin: auto " etiqueta css. Esto funciona en FF y Safari. Simplemente asigne a un div un ancho y un margen automático, y si el padre tiene un ancho del 100%, entonces este div se alineará en el centro.
Para que esto funcione en IE, debe usar el atributo text-align: center en el padre y luego alinear text a la izquierda en el div centrado real.
AFAIK, no hay forma de cambiar las coordenadas absolutas de 0,0 a algún otro punto de arbitraje. Relativo es el camino a seguir.
tal vez no entendí la tarea, pero creo que puedes usar
margin: 0 auto;
para centrar tus divs
Utiliza el posicionamiento relativo en el padre y dale a ese mismo elemento la propiedad:
margin: 0 auto;
El padre ahora está posicionado y debería poder establecer elementos absolutamente dentro de él.
Ejemplo:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
La forma más fácil:
#element {
position: absolute; /*Absolute Position*/
top: 0;
left: 0; /*Set the 4 coordinates to zero*/
bottom: 0;
right: 0;
margin: auto; /*Margin to Auto*/
height: 150px; /*Set the Height and Width*/
width:150px;
background:green; /* Backgroung:optional*/
}
Esto lo colocará justo en el medio, sin importar su tamaño.
¡Espero que eso ayude!
Ver Fiddle: http://jsfiddle.net/kfPC6/
¿No quieres un posicionamiento relativo si 0,0 va a ser relativo a un div?
La propiedad text-align: center; hace lo que <center> solía hacer y es muy superior a ella.
Lo único es que es un poco más complejo de usar. ¡Una vez que lo domines, te preguntarás por qué estabas teniendo tantos problemas antes!
Debe usarlo en coordinación con las propiedades de otros elementos en la página. Ese es el problema que los desarrolladores / diseñadores tienen con CSS y las nuevas tecnologías HTML. Nos brinda una forma poderosa de presentar los elementos de nuestra página, pero la hace mucho más compleja y estricta.
La respuesta de Mike Robinson ciertamente resuelve el problema que tienes aquí y es un gran ejemplo. Pero ...
No creo que ninguna respuesta le muestre cómo usar text-align correctamente para todos los casos que encuentre, pero trate de ver cómo el posicionamiento en CSS funciona más en profundidad.
