Como hacer un centro div align usando CSS?

En este vamos a aprender cómo podemos centro de la sección div align en la página web usando CSS? Debido a que utilizamos class propiedad de texto centrado text-align. Pero todo centro for bloque de alineación usamos propiedades de los márgenes misma propiedad que utilizamos en la imagen alinear en el centro de la página.

CSS ayuda en el estilo de los elementos HTML. Para hacer div sección en el centro de la página, utilizaremos las propiedades del margen.

Vamos a suponer, tuvimos div bloque de la siguiente manera:

<div>
<p>Hello</p>
</div>

Al principio, usted pensará propiedad text-align se centrará el div como: text-align: center;

Pero , esto es un error que se centrará no sólo el texto del bloque entero de div. for div centrado usaremos valor de margen propiedad y conjunto de margen de automático . Margen ofrece espacio fuera de la frontera del elemento. Proporcionamos propiedad margen de la siguiente manera:

p{
margin: 10px;
}

En él se fijará 10px espacio en torno al contenido del párrafo de izquierda, derecha, abajo y arriba. Si quieres diferentes valores class izquierda, derecha, abajo y arriba y luego lo proporcionan como sigue:

p{
margin-top:10px;
margin-right:12px;
margin-bottom:5px;
margin-left:7px;
}

Si establece margen de automático entonces se centrará el div horizontalmente. En él se fijará el margen de todos los lados por igual en función del espacio disponible en la página. Para div central utilizando margen , debe contener ancho propiedad. For página de respuesta debe contener propiedad de ancho máximo , establece como sigue:

.div{
margin:auto;
width:500px;
}

Este fragmento de código align centro de la div en la página . Pero , esto no va a funcionar class sensible. class responde este pedazo de código funciona:

.div{
margin:auto;
max-width:600px;
}

Código HTML con CSS:

<html>
<head>
<title>Center Div</title>
<style>
.h1style{
font-size:30px;
font-family:Georgia;
color: #FF5733;
text-align:center;
}
.center-div{
margin:auto;
max-width:600px;
background-color:#800000;
color:#ffffff;
padding:10px;
text-align:center;
height:400px;
border:2px solid #ffffff;
border-radius:3px;
}
</style>
</head>
<body>
<h1 class="h1style">Center The Div Using Css</h1>
<div class="center-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</p>
</div>
</body>
</html>

Resultado:

How to make a div centre align using CSS? - 4

DMEO


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *