css - texto - centrar un div bootstrap
Cómo alinear un<div> con el centro(horizontalmente/ancho) de la página (27)
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo centrar horizontalmente un <div>? 90 respuestas
Tengo una etiqueta div con width establecido a 800px . Cuando el ancho del navegador es mayor que 800 px , no debe estirar el div sino que debe llevarlo a la mitad de la página.
¿Quieres decir que quieres centrarlo vertical u horizontalmente? Dijiste que especificaste la
heighta 800px, y querías que el div no se estirara cuando elwidthera mayor que eso ...Para centrar horizontalmente, puede utilizar el
margin: auto;atributo en css. Además, tendrás que asegurarte de que los elementos delbodyy elhtmlno tengan ningún margen o relleno:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Agregue esta clase a la división que desee centrar (que debería tener un ancho de conjunto):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
O agrega las cosas de margen a tu clase div, como esto:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Algunas otras configuraciones preexistentes del código anterior que evitarán que la página central se centre en L&R son: 1) otras clases ocultas en enlaces de hojas de estilo externas. 2) otras clases incrustadas en algo como un img (como para controles de formato de impresión CSS externos más antiguos). 3) el código de leyenda con ID y / o CLASES entrará en conflicto con una clase div nombrada.
Centrado sin especificar el ancho div.
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
Esto es algo como lo hace la etiqueta <center> , excepto:
- todos los elementos secundarios en línea directos (por ejemplo,
<h1>) de<center>también se posicionarán para centrar - El elemento de bloque en línea puede tener diferentes tamaños (adaptado para
display:blockconfiguración dedisplay:block) de acuerdo con los valores predeterminados del navegador
En mi caso, el tamaño de la pantalla del teléfono es desconocido, esto es lo que hice.
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border:0;
background: url(''../images/loading.gif'') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JS (antes de que necesites mostrar este DIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
Esto funciona también en IE, los márgenes automáticos no lo hacen.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
Esto se puede lograr fácilmente a través del contenedor flexible.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
La solución Flexbox moderna es el camino a seguir a partir de 2015. justify-content: center se utiliza para que el elemento principal alinee el contenido con el centro de la misma.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Salida
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
Para que también funcione correctamente en Internet Explorer 6, debe hacerlo de la siguiente manera:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
Si el contenido de su centro es profundo dentro de otros divs, entonces solo el margen puede salvarlo. Nada más. Lo enfrento siempre cuando no uso framework como Bootstrap.
Si tiene contenido regular y no solo una línea de texto, la única razón posible que conozco es para calcular el margen.
Aquí hay un ejemplo:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
Entonces, #supercontainer es tu "whole page" y su width es de 1200px .
#middlecontainer es div con el contenido de su sitio; Su width 102px . En caso de que se conozca el width del contenido, debe dividir el tamaño de la página en 2 y substruir la mitad del width del contenido como resultado:
1200/2 - (102/2) = 549;
Sí, también veo que esto es DER GROSSE fail of CSS.
Simple http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
Simplemente use la etiqueta central justo después de la etiqueta del cuerpo, y finalice la etiqueta central justo antes de que termine
<body>
<center>
........your code here.....
</center>
</body>
Esto me funcionó con todos los navegadores que he probado.
También puedes usarlo así:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
Una pregunta bastante antigua con muchas respuestas, pero por alguna razón, ninguna de ellas me funcionó realmente. Esto es lo que funcionó para mí y funciona también en el navegador:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
}
Use justify-content y align-items para alinear horizontal y verticalmente un div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Use el siguiente código para centrar la caja div:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>
Use la propiedad css flex : http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* centerized */
display: box;
flex-align: center;
flex-pack: center;
}
obtenga el ancho de la pantalla que el margen izquierdo 25% deje el margen derecho 25% de esta manera el contenido de su contenedor se ubicará en el medio. Ejemplo: supongamos que el ancho del contenedor = 800px; <
div class=''container'' width=''device-width'' id=''updatedContent''>
<p id=''myContent''></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
''left'':''-(device-width/0.25)px'';
''right'':''-(device-width/0.225)px'';
});
}
position: absolute y luego top:50% e left:50% coloca el borde superior verticalmente en el centro de la pantalla, y el borde izquierdo horizontalmente en el centro, luego, agregando margin-top a negativo de la altura del div, es decir, -100 lo desplaza arriba por 100, de manera similar para el margin-left . Esto obtiene div exactamente en el centro de la página.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
División centrada vertical y horizontalmente dentro de la matriz sin fijar el tamaño del contenido
Echa un vistazo a este ejemplo (clic) . Muy simple, y trabaja para alturas flexibles también. Perfecto si no tienes contenido con altura fija.
Y aquí (clic) es una buena descripción con algunas otras soluciones.
Y aquí (haga clic) otro ejemplo con una solución de ancho flexible con el famoso truco del 50%
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
Si desea cambiar la posición vertical, cambie el valor de 250 y puede organizar el contenido según sus necesidades. No hay necesidad de dar el ancho y otros parámetros.
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
<parent>
<child>
</child>
</parent>
padre {posición: relativo} hijo {posición: absoluta, izquierda: 50%, transformar: traducirX (-50%)}
.middle {
margin: auto;
text-align: center;
}
body, html{
display:table;
height:100%;
width:100%;
}
.container{
display:table-cell;
vertical-align:middle;
}
.container .box{
width:100px;
height:100px;
background:red;
margin:0 auto;
}
"width: 100%" para la etiqueta "body" es solo por ejemplo. En proyecto real puede eliminar esta propiedad.