CODEWITHSUNDEEP
htmlcss
xms
xms

Reputation: 437

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!

Upvotes: 0

Views: 75

Answers (3)

TannerHolm
TannerHolm

Reputation: 2033

I would wrap everything in a container, then use flex on both the container as well as the individual divs containing the X's. Fiddle here.

.container {
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  width: 10rem;
}
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.parent div {
  margin: 8px 0;
}
<div class="container">

  <div class="parent">
  <div>X</div>
  <div>X</div>
  <div>X</div>
  </div>

  <div class="parent">
    <div>X</div>
    <div>X</div>
    <div>X</div>
    <div>X</div>
  </div>

  <div class="parent">
  <div>X</div>
  <div>X</div>
  <div>X</div>
  <div>X</div>
  <div>X</div>  
  </div>
</div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106048

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.

Upvotes: 0

Bri
Bri

Reputation: 593

Just add some margin for the spacing: https://jsfiddle.net/e086qn3c/

CSS:

div div:first-child {
    margin-right: 20px;
}

Upvotes: 2

Related Questions