如何将元素与显示表对齐？如果您已经将显示表单元格应用于您的孩子？

时间：2018-06-15 11:24:18

标签： html css css-tables display

我试图以不同的方式集中元素，如何将最后一个元素作为g-type的中心？我把他们的孩子放在桌子上，在应用text-align时它对我不起作用，问题出在哪里？ 我是否必须将一些财产应用于桌面？

我留下代码，以便您可以看到发生了什么：

    <!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;
}

2 个答案:

答案 0 :(得分：0)

添加此款式

.tipo-g {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在您的代码中，只需要为您的班级 .tipo-g

添加保证金
  

保证金：0自动;

我在这里更新您的代码。请检查。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
 <!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题