vertical - centrar texto horizontalmente css
Centrar una posición: elemento fijo (12)
Quiero hacer un cuadro emergente centrado en la pantalla con ancho y altura dinámicos.
Este es un enfoque moderno para centrar horizontalmente un elemento con un ancho dinámico: funciona en todos los navegadores modernos; El soporte se puede ver aquí .
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
Para el centrado vertical y horizontal, puede utilizar lo siguiente:
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Es posible que también desee agregar más propiedades con prefijo de proveedor (consulte los ejemplos).
Me gustaría hacer una position: fixed; Cuadro emergente centrado en la pantalla con una anchura y altura dinámicas. Utilicé margin: 5% auto; para esto. Sin position: fixed; se centra bien horizontalmente, pero no verticalmente. Después de añadir la position: fixed; Incluso no está centrado horizontalmente.
Aquí está el conjunto completo:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
¿Cómo centrar este cuadro en la pantalla con CSS?
Agrega un contenedor como:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Luego pon tu caja en esta div hará el trabajo.
Básicamente, debe configurar la top e left al 50% para centrar la esquina superior izquierda de la división. También debe configurar el margin-top y el margin-left a la mitad negativa de la altura y el ancho del div para desplazar el centro hacia el centro del div.
Por lo tanto, siempre que haya un <!DOCTYPE html> (modo estándar), esto debería hacer:
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
O, si no te importa centrar verticalmente y los navegadores antiguos como IE6 / 7, también puedes agregar left: 0 y right: 0 al elemento que tiene un margin-left y un margin-right de auto , para que el elemento de posición fija que tiene un ancho fijo sabe dónde comienzan sus desplazamientos a la izquierda y la derecha. En su caso así:
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won''t work in IE6/7. */
left: 0;
right: 0;
Nuevamente, esto solo funciona en IE8 + si te importa IE, y se centra solo horizontalmente y no verticalmente.
Básicamente, puedes envolverlo en otro div y establecer su position como fixed .
.bg {
position: fixed;
width: 100%;
}
.jqbox_innerhtml {
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="bg">
<div class="jqbox_innerhtml">
This should be inside a horizontally and vertically centered box.
</div>
</div>
Esta solución no requiere que usted defina un ancho y alto a su div emergente.
Y en lugar de calcular el tamaño de la ventana emergente, y menos la mitad en la parte superior, javascript está redimensionando el popupContainer para llenar toda la pantalla ...
(100% de altura, no funciona cuando se usa display: table-cell; (que se requiere para centrar algo verticalmente)) ...
De todos modos funciona :)
Intenta usar esto para elementos horizontales que no se centren correctamente.
ancho: calc (ancho: 100% - ancho lo que sea que esté descentrado )
Por ejemplo, si su barra de navegación lateral es 200px:
width: calc(100% - 200px);
La única solución infalible es usar table align = center como en:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
No puedo creer que personas de todo el mundo desperdicien esta gran cantidad de tiempo para resolver un problema tan fundamental como centrar un div. La solución css no funciona para todos los navegadores, jquery solution es una solución computacional de software y no es una opción por otras razones.
He perdido demasiado tiempo repetidamente para evitar usar la mesa, pero la experiencia me dice que deje de luchar contra ella. Use la tabla para centrar div. Funciona todo el tiempo en todos los navegadores! Nunca más te preocupes.
O simplemente agregue left: 0 y right: 0 a su CSS original, lo que hace que se comporte de manera similar a un elemento regular no fijo y la técnica usual de margen automático funciona:
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}
Tenga en cuenta que necesita usar un DOCTYPE HTML válido (X) para que se comporte correctamente en IE (que, por supuesto, debería tener de todos modos ..!)
Para arreglar la posición usa esto:
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
Solo agrega:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Una posible answer :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Center Background Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div.centred_background_stage_1 {
position: fixed;
z-index:(-1 );
top: 45%;
left: 50%;
}
div.centred_background_stage_2 {
position: relative;
left: -50%;
top: -208px;
/* % does not work.
According to the
http://reeddesign.co.uk/test/points-pixels.html
6pt is about 8px
In the case of this demo the background
text consists of three lines with
font size 80pt.
3 lines (with space between the lines)
times 80pt is about
~3*(1.3)*80pt*(8px/6pt)~ 416px
50% from the 416px = 208px
*/
text-align: left;
vertical-align: top;
}
#bells_and_wistles_for_the_demo {
font-family: monospace;
font-size: 80pt;
font-weight: bold;
color: #E0E0E0;
}
div.centred_background_foreground {
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="centred_background_stage_1">
<div class="centred_background_stage_2">
<div id="bells_and_wistles_for_the_demo">
World<br/>
Wide<br/>
Web
</div>
</div>
</div>
<div class="centred_background_foreground">
This is a demo for <br/>
<a href="http://.com/questions/2005954/center-element-with-positionfixed">
http://.com/questions/2005954/center-element-with-positionfixed
</a>
<br/><br/>
<a href="http://www.starwreck.com/" style="border: 0px;">
<img src="./star_wreck_in_the_perkinnintg.jpg"
style="opacity:0.1;"/>
</a>
<br/>
</div>
</body>
</html>
left: 0;
right: 0;
No estaba trabajando bajo IE7.
Cambiado a
left:auto;
right:auto;
Comenzó a trabajar pero en los demás navegadores deja de funcionar! Usado de esta manera para IE7 a continuación.
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:''fixed'', bottom:''0'', height:''auto'', left:''auto'', right:''auto''});
}