html - attribute - centro alineando un div de posición fija
title html (11)
Intento obtener un div que tenga una position:fixed centro position:fixed alineado en mi página.
Siempre he sido capaz de hacerlo con divs absolutamente posicionados usando este "truco"
left: 50%; width: 400px; margin-left:-200px
... donde el valor de margin-left es la mitad del ancho de div.
Esto no parece funcionar para los divs de posición fija, sino que simplemente los coloca con su esquina más a la izquierda al 50% e ignora la declaración de margen izquierdo.
¿Alguna idea de cómo solucionar esto para poder alinear al centro los elementos posicionados fijos?
Y le agregaré un M & M extra si me puede decir una mejor manera de alinear los elementos posicionados en el centro de la manera que he descrito anteriormente.
Desde la publicación anterior, creo que la mejor manera es
- Tener un div fijo con
width: 100% - Dentro del div, crea un nuevo div estático con
margin-left: autoymargin-right: auto, o para tabla hazloalign="center". - Tadaaaah, has centrado tu div fijo ahora
Espero que esto ayude
Es bastante fácil usar ancho: 70%; izquierda: 15%;
Establece el ancho del elemento al 70% de la ventana y deja un 15% en ambos lados
Esto funciona si desea que el elemento se expanda por la página como otra barra de navegación.
width: calc (width: 100% - width lo que sea que no esté centrado)
Por ejemplo, si su barra de navegación lateral es 200px:
ancho: calc (100% - 200px);
La respuesta de Koen no centra exactamente el elemento.
La forma correcta es usar la propiedad de CCS3 transform . Aunque no es compatible con algunos navegadores antiguos . Y ni siquiera necesitamos establecer un width fijo o relativo.
.centered {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
}
Trabajando jsfiddle comparación here .
Los divs normales deberían usar margin-left: auto y margin-right: auto , pero eso no funciona para divs fijos. La forma de evitar esto es similar a la respuesta de Andrew , pero no usa el elemento desaprobado <center> . Básicamente, solo dale al div fijo una envoltura.
#wrapper {
width: 100%;
position: fixed;
background: gray;
}
#fixed_div {
margin-left: auto;
margin-right: auto;
position: relative;
width: 100px;
height: 30px;
text-align: center;
background: lightgreen;
}
<div id="wrapper">
<div id="fixed_div"></div>
</div
Esto centrará un div fijo dentro de un div mientras permite que el div reaccione con el navegador. es decir, el div se centrará si hay suficiente espacio, pero colisionará con el borde del navegador si no lo hay; similar a cómo reacciona un div centrado y regular.
Para los que tienen este mismo problema, pero con un diseño receptivo, también puede usar:
width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;
Hacer esto mantendrá siempre su div fijo centrado en la pantalla, incluso con un diseño receptivo.
Si quiere centrar el alineamiento de un divisor de posición fijo tanto vertical como horizontalmente, use esto
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
Si sabes que el ancho es 400px, esta sería la forma más fácil de hacerlo, supongo.
left: calc(50% - 200px);
Una buena manera de centrar un elemento "fijo" sería hacer un elemento "central" como fijo y con un ancho del 100%, y todo lo que esté en él estará en el centro del "centro" de 100% de ancho.
El css sería:
#center{
position:fixed;
width: 100%; //this basically stretches all over the window as fixed
}
El html sería:
<html><head></head>
<body>
<center id=''center''>
...elements
</center>
</body></html>
El mismo método se puede aplicar al posicionamiento absoluto de los elementos.
ACTUALIZACIÓN: Y para los escépticos que piensan que la etiqueta central está en desuso, puede ser reemplazada por una división envoltorio que tenga la propiedad alinear = "centro" aplicada. Incluso podría haber eliminado la alineación y podría usar text-align: center .
Una solución que usa flex box; totalmente receptivo:
parent_div {
position: fixed;
width: 100%;
display: flex;
justify-content: center;
}
child_div {
/* whatever you want */
}
Usé lo siguiente con Twitter Bootstrap (v3)
<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
<div class="container">
<p>Stuff - rows - cols etc</p>
</div>
</footer>
Es decir, hacer un elemento de ancho completo que sea una posición fija, y simplemente meter un contenedor en él, el contenedor se centra en relación con el ancho total. Debería comportarse bien también.