Geek Answers Handbook

Why does the position of an element in a block block have an incorrect vertical position in a row

When I put the inline-block element (14x14px) in a line with one line (line height and line height = 20px), this does not happen in the middle of its parent (vertical). Image of line height problem

Here is an example of Codepen

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%;
  }
}

Please tell me why this is happening?

+4
source share
4 answers

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

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

( 2: nd , -), , , , .

. "Vangel Tzo", flex - .

.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>
Hide result
+3

display: flex (.status) align-self: center, .

  .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%;
  }

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

0

@LGSon, vertical-align css, . , . position:relative .status, position:absolute .

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

0

.

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;}

.

.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;}
-1

More articles:


All Articles