CODEWITHSUNDEEP
css
Ziyu
Ziyu

Reputation: 1127

inline-block align with text

I have a inline-block element and some text on the same line. They don't seem to align on the same baseline.

<div>
  <i class="avatar"></i>
  <span>Name</span>
</div>

i.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  box-sizing: content-box;
  border: 2px solid black;
}
span {
  display: inline-block;
  border: 2px solid black;
}

Please see http://jsfiddle.net/Cr952/ for what I mean.

Any ideas to align them? Thanks.

Upvotes: 0

Views: 145

Answers (3)

mcn
mcn

Reputation: 721

Is this what you want?

enter image description here

then use float:left as follow,

CSS

i.avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid black;
    float: left;
}
span {
    display: inline-block;
    border: 2px solid black;
    float: left;
}

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

Add vertical-align: bottom to i.avatar.

Screenshot

i.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  box-sizing: content-box;
  border: 2px solid black;
  vertical-align: bottom;
}

Fiddle

Upvotes: 2

K K
K K

Reputation: 18099

Addvertical-align:bottom in i css

Upvotes: 0

Related Questions