pantalla - ¿Cómo centrar fácilmente horizontalmente un<div> utilizando CSS?
centrar imagen verticalmente css (22)
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo centrar horizontalmente un <div>? 90 respuestas
Estoy tratando de centrar horizontalmente un elemento de bloque <div> en una página y hacer que se establezca en un ancho mínimo. ¿Cuál es la forma más sencilla de hacer esto? Quiero que el elemento <div> esté en línea con el resto de mi página. Trataré de dibujar un ejemplo:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
Agregue esta clase a su archivo css que funcionará perfectamente pasos a seguir:
1) crea esto primero
<div class="center-role-form">
<!--your div (contrent) place here-->
</div>
2) agrega esto a tu css
.center-role-form {
width: fit-content;
text-align: center;
margin: 1em auto;
}
Aquí agrego la respuesta apropiada
Puede utilizar este código de fragmento y personalizar. Aquí uso 2 bloques de niños. Esto debería mostrar el centro de la página. Puede utilizar uno o varios bloques.
<html>
<head>
<style>
#parent {
width: 100%;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="mydiv" id="parent">
<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>
</div>
</body>
</html>
Debe usar position: relative y text-align: center en el elemento primario y luego display: inline-block en el elemento secundario que desea centrar. Este es un patrón de diseño CSS simple que funcionará en todos los principales navegadores. Aquí hay un ejemplo a continuación o echa un vistazo al Ejemplo de CodePen .
p {
text-align: left;
}
.container {
position: relative;
display: block;
text-align: center;
}
/* Style your object */
.object {
padding: 10px;
color: #ffffff;
background-color: #556270;
}
.centerthis {
display: inline-block;
}
<div class="container">
<p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>
<span class="object centerthis">Something Centered</span>
<p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>
Después de nueve años pensé que era hora de traer una nueva versión. Aquí están mis dos (y ahora uno) favoritos.
Margen
Establecer el margin en auto . Debe saber que la secuencia de dirección es el margin: *top* *right* *bottom* *left*; o margin: *top&bottom* *left&right*
aside{
display: block;
width: 50px;
height: 100px;
background-color: green;
float: left;
}
article{
height: 100px;
margin: 0 0 0 50px; /* 50px aside width */
background-color: grey;
}
div{
margin: 0 auto;
display:block;
width: 60px;
height: 60px;
background-color: blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
</aside>
<article>
<div>The div</div>
</article>
</body>
</html>
Centro: Depricado, ¡no uses esto!
Use las etiquetas <center></center> como un ajuste alrededor de su <div></div> .
Ejemplo:
aside{
display:block;
background-color:green;
width: 50px;
height: 100px;
float: left;
}
center{
display:block;
background-color:grey;
height: 100px;
margin-left: 50px; /* Width of the aside */
}
div{
display:block;
width: 60px;
height: 60px;
background-color:blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
</aside>
<article>
<center>
<div>The div</div>
</center>
</article>
</body>
</html>
El título de la pregunta y el contenido son realmente diferentes, así que publicaré dos soluciones para eso usando Flexbox .
Supongo que Flexbox reemplazará / agregará a la solución estándar actual en el momento en que IE8 e IE9 estén completamente destruidos;)
Compruebe la tabla de compatibilidad del navegador actual para flexbox
Elemento único
.container {
display: flex;
justify-content: center;
}
<div class="container">
<img src="http://placehold.it/100x100">
</div>
Múltiples elementos pero centro solo uno.
El comportamiento predeterminado es flex-direction: row que alineará todos los elementos secundarios en una sola línea. Configurándolo en flex-direction: column ayudará a que las líneas se apilen.
.container {
display: flex;
flex-direction: column;
}
.centered {
align-self: center;
}
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div class="centered"><img src="http://placehold.it/100x100"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
En el caso de un div de ancho no fijo (es decir, no sabe cuánto espacio ocupará el div).
#wrapper {
background-color: green; /* for visualization purposes */
text-align: center;
}
#yourdiv {
background-color: red; /* for visualization purposes */
display: inline-block;
}
<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>
Tenga en cuenta que el ancho de #yourdiv es dinámico -> crecerá y se reducirá para acomodar el texto dentro de él.
Puedes consultar la compatibilidad del navegador en Caniuse
En la mayoría de los navegadores esto funcionará:
div.centre {
width: 200px;
display: block;
background-color: #eee;
margin-left: auto;
margin-right: auto;
}
<div class="centre">Some Text</div>
En IE6 necesitarás agregar otro div externo:
div.layout {
text-align: center;
}
div.centre {
text-align: left;
width: 200px;
background-color: #eee;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="layout">
<div class="centre">Some Text</div>
</div>
En tu archivo html escribes:
<div class="banner">
Center content
</div>
tu archivo css escribes:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
funciona para mi.
La mejor respuesta a esta pregunta es usar el margin-auto pero para usarlo debes saber el width de tu div en px o % .
Código CSS:
div{
width:30%;
margin-left:auto;
margin-right:auto;
}
Por favor, utilice el código de abajo su div estará en el centro
.class-name{
display:block;
margin:0 auto;
}
Puedes usar la posición: relativa; y luego establezca los valores superiores e izquierdos:
.cenverDiv{
position:relative;
left:30%;
top:0px;
}
Si conoce el ancho de su div y es fijo, puede usar el siguiente css:
margin-left: calc(50% - ''half-of-your-div-width'');
donde ''half-of-your-div-width'' debería ser (obviamente) la mitad del ancho de tu div.
Si los navegadores antiguos no son un problema, use HTML5 / CSS3. Si lo son, aplique polyfills y aún use HTML5 / CSS3. Supongo que su división no tiene márgenes ni rellenos aquí, pero son relativamente fáciles de explicar. El código sigue.
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
Lo que esto hace es:
- Coloque el
divrelación con su contenedor; - Coloque el límite izquierdo del
dival 50% del ancho de su contenedor horizontalmente; - Realice la conversión horizontalmente en un 50% del ancho propio del
div.
Es fácil imaginar este proceso para confirmar que la div se centrará horizontalmente en el futuro. Como beneficio adicional, puedes centrarte verticalmente sin costo adicional:
.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}
La ventaja de este enfoque es que no tiene que hacer nada contraintuitivo, como considerar su div un texto de tipo, envolverlo en un contenedor adicional (a menudo semánticamente inútil), o darle un ancho fijo, que no es siempre posible
No olvide los prefijos de proveedor para la transform si es necesario.
Si su <div> tiene una position: absolute , debe usar el width: 100%;
#parent {
width: 100%;
text-align: center;
}
#child {
display: inline-block;
}
Usando jQuery:
$(document).ready(function() {
$(".myElement").wrap( ''<span class="myElement_container_new"></span>'' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(".myElement").css({
"display" : "block",
"position" : "relative",
"max-width" : "75%", // for example
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
o, si quieres centrar cada elemento con la clase ".myElement":
$(document).ready(function() {
$(".myElement").each(function() {
$(this).wrap( ''<span class="myElement_container_new"></span>'' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(this).css({
"display" : "block",
"position" : "relative",
"max-width" : "75%",
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
});
Uso de margin-left: auto y margin-right: auto puede no funcionar en ciertas situaciones. Aquí hay una solución que siempre funcionará. Usted especifica un ancho requerido y luego establece un margen izquierdo a la mitad del ancho restante.
<div style="width:80%; margin-left:calc(10%);">
your_html
</div>
Utilizo las etiquetas div y span junto con las propiedades css, como bloque, centro en línea de navegador cruzado y centro de alineación de texto, vea mi ejemplo simple
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</div>
</body>
</html>
puede usar margin: 0 auto en su css en lugar de margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto;
CSS , HTML :
div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
I am in the middle
</div>
Su diagrama muestra también un elemento de nivel de bloque (que generalmente es un div), no uno en línea.
De la parte superior de mi cabeza, min-width se admite en FF2 + / Safari3 + / IE7 +. Se puede hacer para IE6 usando CSS hacky, o un poco de JS.
.center {
height: 20px;
background-color: blue;
}
.center>div {
margin: auto;
background-color: green;
width: 200px;
}
<div class="center">
<div>You text</div>
</div>
.center {
margin-left: auto;
margin-right: auto;
}
El ancho mínimo no se admite globalmente, pero se puede implementar utilizando
.divclass {
min-width: 200px;
}
Entonces puedes configurar tu div para que sea
<div class="center divclass">stuff in here</div>
margin: 0 auto;
como ha dicho ck , min-width no es compatible con todos los navegadores