我正在尝试以不同的方式居中元素，如何将最后一个元素 g 类型居中？我已经把他们的孩子放在表格单元格上，当应用文本对齐时，它对我不起作用，问题出在哪里？ 我是否必须将某些属性应用于表？
我留下代码，以便您可以看到正在发生的事情：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alineacion con CSS - Reto 4</title>
<link rel="stylesheet" href="solucion.css">
</head>
<body>
<h2>Alineaciones horizontales</h2>
<h2>Tamaño fijo con ancho declarado</h2>
<div class="caja tipo-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
<h2>Tamaño fijo usando calc()</h2>
<div class="caja tipo-b">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
<h2>Elementos con display inline-block</h2>
<div class="tipo-c">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con posicion Absoluta A</h2>
<div class="relative">
<div class="caja tipo-d">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con posicion Absoluta B</h2>
<div class="relative">
<div class="caja tipo-e">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con display Flex</h2>
<div class="tipo-f">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con display Table con ultra soporte a IE6</h2>
<div class="tipo-g">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</body>
<script src="http://localhost:35729/livereload.js"></script>
</html>
body {
background-color: #1D3557;
color: #F1FAEE;
font-family: Arial;
margin: 0;
padding-bottom: 200px;
}
.caja {
width: 200px; /*NO LE AGREGO UN ALTO SIMPLEMENTE UN ANCHO PARA QUE EL ALTO SE CALCULE SOLO*/
border: 1px solid #A8DADC;
margin-bottom: 50px; /*LE AGREGO UN MARGEN INFERIOR PARA QUE NO SE PEGUEN MIS CAJAS Y EXISTA UNA SEPARACION!! NO HACE FALTA DARLE MARGIN SUPERIOR SOLO EL INFERIOR*/
}
.tipo-a {
margin: 0 auto; /*YA QUE TENEMOS UN TAMAÑO DETERMINADO Y UN DISPLAY BLOCK, SIMPLEMENTE CON PONER MARGENES COMO AUTO O 0 AUTO YA TENEMOS UNA CAJA TOTALMENTE CENTRADA*/
}
.tipo-b {
margin-left: calc(100vw / 2 - 100px);
}
.tipo-c {
border: 1px solid #457B9D;
padding: 10px; /*Para que no se peguen los elementos al contenedor*/
text-align: center; /*YA QUE TENEMOS HIJOS CON DISPLAY INLINE-BLOCK Y ESTOS HEREDAN ESTILOS DEL PADRE, ENTONCES SE PUEDEN CENTRAR DESDE EL PADRE PARA QUE HEREDEN LA ALINEACION DE ESTE, ASI QUE PODRIAMOS POR EJEMPLO DARLE UN TEXT-ALIGN DE CENTER*/
}
.tipo-c .caja {
display: inline-block;
text-align: left; /*DEBIDO A QUE HEMOS HEREDADO EL TEXT-ALIGN CENTER INCLUSO A LOS HIJOS DE ESTA CAJA, LE APLICAMOS ESTO PARA QUE VUELVA A ESTAR EL TEXTO QUE ES EL HIJO DEL HIJO COMO ESTABA*/
}
.relative {
position: relative;
border: 1px solid #457B9D;
height: 400px; /*LE DAMOS UN TAMANO AL CONTENEDOR PARA QUE CONTENGAN LOS ELEMENTOS Y NO ME FALTE ESPACIO*/
}
.tipo-d {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
/* top: 0; */
/* width: 200px; */
}
.tipo-e {
position: absolute;
left: 50%;
/* VEMOS QUE TENEMOS EL MISMO ISSUE (PROBLEMA) QUE TENIAMOS CUANDO ESTABAMOS TRABAJANDO CON CALC, PERO ESTA VEZ NO VAMOS A USAR CALC, SINO QUE VAMOS A RESTARLE EN MARGENES IZQUIERDOS NEGATIVOS LA MITAD DEL ANCHO DEFINIDO (DE LA CAJA LOGICAMENTE)
QUE EN ESTE CASO ES 200, ENTONCES LE QUITO 100: */
margin-left: -100px;
}
.tipo-f {
display: flex;
justify-content: center;
}
.tipo-g {
display: table;
/* text-align: center; */
}
.tipo-g .caja {
text-align: center;
display: table-cell;
}
在你的代码中，只需要在你的class.tipo-g
边距：0 自动;
在这里，我更新您的代码。请检查。
body {
background-color: #1D3557;
color: #F1FAEE;
font-family: Arial;
margin: 0;
padding-bottom: 200px;
}
.caja {
width: 200px; /*NO LE AGREGO UN ALTO SIMPLEMENTE UN ANCHO PARA QUE EL ALTO SE CALCULE SOLO*/
border: 1px solid #A8DADC;
margin-bottom: 50px; /*LE AGREGO UN MARGEN INFERIOR PARA QUE NO SE PEGUEN MIS CAJAS Y EXISTA UNA SEPARACION!! NO HACE FALTA DARLE MARGIN SUPERIOR SOLO EL INFERIOR*/
}
.tipo-a {
margin: 0 auto; /*YA QUE TENEMOS UN TAMAÑO DETERMINADO Y UN DISPLAY BLOCK, SIMPLEMENTE CON PONER MARGENES COMO AUTO O 0 AUTO YA TENEMOS UNA CAJA TOTALMENTE CENTRADA*/
}
.tipo-b {
margin-left: calc(100vw / 2 - 100px);
}
.tipo-c {
border: 1px solid #457B9D;
padding: 10px; /*Para que no se peguen los elementos al contenedor*/
text-align: center; /*YA QUE TENEMOS HIJOS CON DISPLAY INLINE-BLOCK Y ESTOS HEREDAN ESTILOS DEL PADRE, ENTONCES SE PUEDEN CENTRAR DESDE EL PADRE PARA QUE HEREDEN LA ALINEACION DE ESTE, ASI QUE PODRIAMOS POR EJEMPLO DARLE UN TEXT-ALIGN DE CENTER*/
}
.tipo-c .caja {
display: inline-block;
text-align: left; /*DEBIDO A QUE HEMOS HEREDADO EL TEXT-ALIGN CENTER INCLUSO A LOS HIJOS DE ESTA CAJA, LE APLICAMOS ESTO PARA QUE VUELVA A ESTAR EL TEXTO QUE ES EL HIJO DEL HIJO COMO ESTABA*/
}
.relative {
position: relative;
border: 1px solid #457B9D;
height: 400px; /*LE DAMOS UN TAMANO AL CONTENEDOR PARA QUE CONTENGAN LOS ELEMENTOS Y NO ME FALTE ESPACIO*/
}
.tipo-d {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
/* top: 0; */
/* width: 200px; */
}
.tipo-e {
position: absolute;
left: 50%;
/* VEMOS QUE TENEMOS EL MISMO ISSUE (PROBLEMA) QUE TENIAMOS CUANDO ESTABAMOS TRABAJANDO CON CALC, PERO ESTA VEZ NO VAMOS A USAR CALC, SINO QUE VAMOS A RESTARLE EN MARGENES IZQUIERDOS NEGATIVOS LA MITAD DEL ANCHO DEFINIDO (DE LA CAJA LOGICAMENTE)
QUE EN ESTE CASO ES 200, ENTONCES LE QUITO 100: */
margin-left: -100px;
}
.tipo-f {
display: flex;
justify-content: center;
}
.tipo-g {
display: table;
/* text-align: center; */
}
.tipo-g .caja {
text-align: center;
display: table-cell;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alineacion con CSS - Reto 4</title>
<link rel="stylesheet" href="solucion.css">
</head>
<body>
<h2>Alineaciones horizontales</h2>
<h2>Tamaño fijo con ancho declarado</h2>
<div class="caja tipo-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
<h2>Tamaño fijo usando calc()</h2>
<div class="caja tipo-b">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
<h2>Elementos con display inline-block</h2>
<div class="tipo-c">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con posicion Absoluta A</h2>
<div class="relative">
<div class="caja tipo-d">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con posicion Absoluta B</h2>
<div class="relative">
<div class="caja tipo-e">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con display Flex</h2>
<div class="tipo-f">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con display Table con ultra soporte a IE6</h2>
<div class="tipo-g">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</body>
<script src="http://localhost:35729/livereload.js"></script>
</html>添加此样式
.tipo-g {
left: 50%;
transform: translateX(-50%);
position: relative;
}
body {
background-color: #1D3557;
color: #F1FAEE;
font-family: Arial;
margin: 0;
padding-bottom: 200px;
}
.caja {
width: 200px;
/*NO LE AGREGO UN ALTO SIMPLEMENTE UN ANCHO PARA QUE EL ALTO SE CALCULE SOLO*/
border: 1px solid #A8DADC;
margin-bottom: 50px;
/*LE AGREGO UN MARGEN INFERIOR PARA QUE NO SE PEGUEN MIS CAJAS Y EXISTA UNA SEPARACION!! NO HACE FALTA DARLE MARGIN SUPERIOR SOLO EL INFERIOR*/
}
.tipo-a {
margin: 0 auto;
/*YA QUE TENEMOS UN TAMAÑO DETERMINADO Y UN DISPLAY BLOCK, SIMPLEMENTE CON PONER MARGENES COMO AUTO O 0 AUTO YA TENEMOS UNA CAJA TOTALMENTE CENTRADA*/
}
.tipo-b {
margin-left: calc(100vw / 2 - 100px);
}
.tipo-c {
border: 1px solid #457B9D;
padding: 10px;
/*Para que no se peguen los elementos al contenedor*/
text-align: center;
/*YA QUE TENEMOS HIJOS CON DISPLAY INLINE-BLOCK Y ESTOS HEREDAN ESTILOS DEL PADRE, ENTONCES SE PUEDEN CENTRAR DESDE EL PADRE PARA QUE HEREDEN LA ALINEACION DE ESTE, ASI QUE PODRIAMOS POR EJEMPLO DARLE UN TEXT-ALIGN DE CENTER*/
}
.tipo-c .caja {
display: inline-block;
text-align: left;
/*DEBIDO A QUE HEMOS HEREDADO EL TEXT-ALIGN CENTER INCLUSO A LOS HIJOS DE ESTA CAJA, LE APLICAMOS ESTO PARA QUE VUELVA A ESTAR EL TEXTO QUE ES EL HIJO DEL HIJO COMO ESTABA*/
}
.relative {
position: relative;
border: 1px solid #457B9D;
height: 400px;
/*LE DAMOS UN TAMANO AL CONTENEDOR PARA QUE CONTENGAN LOS ELEMENTOS Y NO ME FALTE ESPACIO*/
}
.tipo-d {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
/* top: 0; */
/* width: 200px; */
}
.tipo-e {
position: absolute;
left: 50%;
/* VEMOS QUE TENEMOS EL MISMO ISSUE (PROBLEMA) QUE TENIAMOS CUANDO ESTABAMOS TRABAJANDO CON CALC, PERO ESTA VEZ NO VAMOS A USAR CALC, SINO QUE VAMOS A RESTARLE EN MARGENES IZQUIERDOS NEGATIVOS LA MITAD DEL ANCHO DEFINIDO (DE LA CAJA LOGICAMENTE)
QUE EN ESTE CASO ES 200, ENTONCES LE QUITO 100: */
margin-left: -100px;
}
.tipo-f {
display: flex;
justify-content: center;
}
.tipo-g {
display: table;
/* text-align: center; */
}
.tipo-g .caja {
text-align: center;
display: table-cell;
}
.tipo-g {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
position: relative;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alineacion con CSS - Reto 4</title>
<link rel="stylesheet" href="solucion.css">
</head>
<body>
<h2>Alineaciones horizontales</h2>
<h2>Tamaño fijo con ancho declarado</h2>
<div class="caja tipo-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<h2>Tamaño fijo usando calc()</h2>
<div class="caja tipo-b">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<h2>Elementos con display inline-block</h2>
<div class="tipo-c">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con posicion Absoluta A</h2>
<div class="relative">
<div class="caja tipo-d">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con posicion Absoluta B</h2>
<div class="relative">
<div class="caja tipo-e">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con display Flex</h2>
<div class="tipo-f">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<h2>Elementos con display Table con ultra soporte a IE6</h2>
<div class="tipo-g">
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
<script src="http://localhost:35729/livereload.js"></script>
</html>