xms xms - 5 months ago 7
HTML Question

CSS and positioning a group of divs

I would like to get this kind of group of X letters.

X
X
X X
X
X X
X
X


Here is my HTML/CSS code which does not do what I want.

<div>
<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>

<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>

<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>
</div>


What is the problem? Thanks for any help!

Answer

Flex and margin can help too, just with a basis of 2 rules/lines. Example with a list :

/* basis */

/* parent */

ul {
  display: flex;
}
/* children */

li {
  margin: auto 1em;
}
/*reset li ================ */

li {
  display: block;
  /* reset list-item */
}
<ul>
  <li>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
</ul>

for older browser , table-layout will do too (2rules, 3lines)

ul {
  display: table;
}
li {
  display: table-cell;
  vertical-align: middle;
  padding:0 1em;
}
<ul>
  <li>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
</ul>

finaly inline-block also 3lines, 2rules

ul {
  display: block;
}
li {
  display: inline-block;
  vertical-align: middle;
  padding:0 1em;
}
<ul>
  <li>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
</ul>

<ul>, <li>, <p> , can be any tag with or without id,class if structure is respected.

Comments