CSS – Hacer centro interior DIV interior exterior DIV

En este estilo, vamos a aprender cómo hacer un centro interior DIV interior exterior DIV. En general, una Div interior no puede ser central en el interior exterior Div pero utilizando unos parámetros que puede hacer que sea centro.

Fragmento de código CSS – Hacer Interior DIV Centro interior exterior DIV

CSS

<style>
.outerDiv
{
background-color: #006699;
color: #fff;
height: 200px;
width: 200px;
margin: 0px auto;
}
.innerDiv
{
background-color: #efefef;
color: #000;
height: 150px;
width: 150px;
margin: 0px auto;
}
</style>

Código fuente HTML con CSS

<!--CSS - Make Inner DIV center inside Outer DIV.-->
<html>
<head>
<title>CSS - Make Inner DIV center inside Outer DIV.</title>
<!--Example CSS-->
<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
<style>
.outerDiv
{
background-color: #006699;
color: #fff;
height: 200px;
width: 200px;
margin: 0px auto;
}
.innerDiv
{
background-color: #efefef;
color: #000;
height: 150px;
width: 150px;
margin: 0px auto;
}
</style>
</head>
<body style="text-align: center;">
<h1>CSS - Make Inner DIV center inside Outer DIV.</h1>
<div class="outerDiv">
This is Outer DIV.
<div class="innerDiv">
This is Innder DIV.
</div>
</div>
</body>
</html>

Resultado

CSS - Make Inner DIV center inside Outer DIV - 4
clic for DEMO y rarr;


Deja un comentario

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