CODEWITHSUNDEEP
htmlcssdisplay
Volox
Volox

Reputation: 1108

CSS inline-block wrap issue with mixed text and empty div

I have an alignment problem of divs (mixed empty or with text) when display: inline-block is set. See the following image for an example:

See alignment issue

As you can see, the divs with the text somehow are not aligned with the rest of the divs. See this JSFiddle for a working example of my problem.

I already know some ways for fixing this problem but I want to understand why it happens. My goal is to solve this issue with minimal CSS changes (possibly with no HTML modification).

HTML

<div class="bar">
  <div class="actors">
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor num"><span>5</span></div>
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor num"><div>6</div></div>
  </div>
  <div class="lol">lol</div>
</div>

CSS

.bar {
  height: 40px;
  border-bottom: 1px solid #000;
}
.actors {
  float: left;

}
.actor {
  display: inline-block;
  width: 34px;
  height: 34px;

  background-color: gray;
  border-radius: 16px;
  border: 1px solid red;
}
.num {

}
.lol {
  float: right;
}

Upvotes: 5

Views: 687

Answers (2)

LOTUSMS
LOTUSMS

Reputation: 10240

I would prefer to use 

.actor {
    vertical-align: middle;
 }

top fixes your issue here but it pushes them all to the top of the line. Bottom does the opposite. Technically speaking, they are still aligned in either way. So why not align them in the actual middle, just to prevent any further conflicts.

JFiddle

Upvotes: 1

KittMedia
KittMedia

Reputation: 7466

The reason is the default value of vertical-align, which every text has. It has the initial value baseline and thus the orientation is on baseline.

The easiest and smartest way to fix it is to set it to vertical-align: top;:

.actor {
    vertical-align: top;
}

Demo: JSFiddle

Upvotes: 3

Related Questions