0

Tengo tres "div" cada uno con diferentes contenido, los cuales quiero que estén centrados y alineadosde la siguiente manera: introducir la descripción de la imagen aquí

En el que cada cuadro representa cada uno de los div. Pero usando display: inline-block no se acomodan de esa manera. ¿Qué debo de hacer para acomodarlos así? Otra alternativa podría ser usar float, pero ¿cómo podría centrarlos?

2
  • Utiliza css3 para ello existe ahora display flex.
    – vicasas
    Commented el 29 jun. 2018 a las 19:37
  • para inline vertical-align:top Commented el 29 jun. 2018 a las 19:46

2 respuestas 2

2

Para elementosinline-block se usa vertical-align:top

algo asi:

.externo {
  background:#fafafa;
}
ul, .centrado {
  text-align:center;
}
li, .aintlyin {
   display:inline-block;
   vertical-align:top;
   width: 50px;
   margin: 20px;
   padding: 20px;
   border: 1px dashed red;
   background: #fff;
}
<div class="externo">
  <h2>con UL</h2>
  <ul class="centrado">
    <li>un item</li>
    <li>otro item</li>
    <li>otro item</li>
    <li>otro item un poco mas largo</li>
    <li>otro item</li>
    <li>otro item</li>
    <li>otro item</li>
    <li>otro item mas largo</li>
    <li>otro item</li>
  </ul>
</div>

<div class="externo">
  <h2>con DIV</h2>
  <div class="centrado">
    <div class="aintlyin">un item</div>
    <div class="aintlyin">otro item</div>
    <div class="aintlyin">otro item</div>
    <div class="aintlyin">otro item un poco mas largo</div>
    <div class="aintlyin">otro item</div>
    <div class="aintlyin">otro item</div>
    <div class="aintlyin">otro item</div>
    <div class="aintlyin">otro item mas largo</div>
    <div class="aintlyin">otro item</div>
  </div>
</div>

2

Como te mencione en el comentario, para ello podrias utilizar una propiedad nueva de CSS3 que se llama display: flex, Te dejo un ejemplo acá.

.box {border: 1px solid black}
.row {display: flex}
.col {-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;}
<div class="row">
  <div class="box col">HOLA SOY UN DIV 1</div>
  <div class="box col">HOLA SOY UN DIV 2</div>
  <div class="box col">HOLA SOY UN DIV 3</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.