CODEWITHSUNDEEP
htmlcss
mlevoshin
mlevoshin

Reputation: 43

Why inline-block element position has wrong vertical position in a line

When i put my inline-block element (14x14px) in single-line row (height and line-height = 20px), it takes place not in the middle of it's parent (vertical). Line-height problem picture

Here's a Сodepen example

HTML

<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>

CSS

body {
  font-size: 16px;
  line-height: 20px;
}

.status {
  position: relative;
  display: block;
  white-space: nowrap;
  border: 1px solid #000; // block border for helping test
  margin: 0 0 20px;

  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background-color: #d6d6d6;
    border-radius: 50%;
  }
}

Tell me, please, why is it happening?

Upvotes: 4

Views: 382

Answers (4)

Rapha&#235;l VO
Rapha&#235;l VO

Reputation: 2630

As @LGSon explaination, the vertical-align is not a magical css, and its behaviour is never trusted by me. So I suggest an alternative way to align your elements in the way you want. Because you already put position:relative in the .status, I suggest to use position:absolute to style for your generated content and it is more consistent between each browsers.

A codepen example: http://codepen.io/thovo/pen/MypQbW

Upvotes: 0

Asons
Asons

Reputation: 87191

The vertical-align: middle aligns the middle of the element with the middle of lowercase letters in the parent, which simply means the vertical alignment is not a 100% precise way to put an element in the exact middle of its parent.

Src: https://css-tricks.com/almanac/properties/v/vertical-align/

In below samples I added a wrapper (and span's in 2:nd sample, with font size matching the pseudo's size) to show how they interact and how you can do to make the outcome look better.

Note: As suggested by "Vangel Tzo", flex is one way that does the job better.

.wrap {
  padding: 20px;
  font-size: 16px;
  font-family: "helveticaneuecyr", Arial, sans-serif;
  line-height: 20px;
}

.status {
  position: relative;
  white-space: nowrap;
  border: 1px solid #000;
  margin: 0 0 20px;
}
.status:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background-color: #d6d6d6;
  border-radius: 50%;
}
.status_success:before {
  background-color: #3ad994;
}
.status_missed:before {
  background-color: #e83e3e;
}
.status_busy:before {
  background-color: #f5be48;
}
.status span {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}
<div class="wrap"> 
  <div class="status status_success"> Success</div>
  <div class="status status_busy"> Busy</div>
  <div class="status status_missed"> Missed</div>
</div>
<div class="wrap"> 
  <div class="status status_success"> <span>Success</span></div>
  <div class="status status_busy"> <span>Busy</span></div>
  <div class="status status_missed"> <span>Missed</span></div>
</div>

Upvotes: 3

Vangel Tzo
Vangel Tzo

Reputation: 9303

You could use display: flex for parent element (.status) and the align-self: center property to center it vertically. 

  .status {
    position: relative;
    white-space: nowrap;
    border: 1px solid #000;
    margin: 0 0 20px;
    display: flex;
  }

  .status:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    align-self: center;
    background-color: #d6d6d6;
    border-radius: 50%;
  }

An example: http://codepen.io/srekoble/pen/BKWJgx

Upvotes: 0

Yashpal Sindhav
Yashpal Sindhav

Reputation: 375

try below code for horizontaly center code. 

body { font-size: 16px; line-height: 20px; text-align:center;}
.status { float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}

try below code for verticaly center code. 

.status { display:table: width:100%; float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}
.status:before { display:table-cell; vertical-align: middle;}

Upvotes: -1

Related Questions