작동하지 않는 백분율로 표시되는 줄 높이

작동하지 않는 백분율로 표시되는 줄 높이

---

선 높이에 문제가있어서 고개를 돌릴 수 없습니다.

다음 코드는 div 내에서 이미지를 중앙에 배치합니다.

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

그러나 줄 높이를 100 %로 변경하면 줄 높이가 적용되지 않거나 최소한 div의 100 %가되지 않습니다.

예제 jsfiddle

아무도 내가 뭘 잘못하고 있는지 알고 있습니까?

---

line-height: 100%높이의 100 %가 아니라 해당 요소의 글꼴 크기의 100 %를 의미합니다. 그 값이 절대 길이의 단위 (사용하지 않는 점에서, 라인 높이 항상 폰트 사이즈,하지의 높이를 기준으로 px, pt등).

---

이 질문이 오래되었다는 것을 알고 있지만 완벽한 해결 방법이 무엇인지 알았습니다.

이 CSS를 중앙에 배치하려는 div에 추가합니다.

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

이것은 매번 작동하며 깨끗합니다.

편집 : 완성을 위해 scss를 사용하고 수직으로 중앙에 배치하고 싶은 직계 자식 인 모든 부모 에게 포함하는 편리한 믹스 인이 있습니다.

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

전체 설명 : div:beforediv 내부에 요소를 추가하지만 하위 요소 앞에 추가합니다. 사용 :before하거나 선언을 :after사용해야합니다. content:그렇지 않으면 아무 일도 일어나지 않지만 우리의 목적을 위해 내용이 비어있을 수 있습니다. 그런 다음 부모의 높이가 정의되고이 요소가 최소한 인라인 블록 인 한 요소의 높이를 부모만큼 높이도록 지시합니다. 다르게 작동 vertical-align하는 것과는 반대로 부모와 관련된 자기의 수직 위치를 정의합니다 text-align.

@mixin선언은 말대꾸 사용자를위한 것입니다 그리고 그것은 다음과 같이 사용됩니다 :

div {
    @include vertical-align(middle)
}

---

When you use percentage as the line-height it is not based on the div container, rather its based on the font-size.

---

line-height: 100% would be an easy way to vertically center elements, if it was calculated in relation to the container, but that would be too easy, hence it doesn't work.

So instead, it is just another way of saying line-height: 1em (right?)

Another way of vertically centering an element would be:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

---

might not be pretty, but it's working, and its semantic;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell gives an element the unique table ablillity to align verticaly (atleast i think its unique)

---

This is a very late answer, however in modern browsers, assuming that the parent element is 100% of the screen height as well, you can use the vh viewport unit. FIDDLE

line-height: 100vh;

Browser support

---

You can set line-height based on that element height. If the element height 200px means you need to set line height to 200px to center the text.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

---

This solution works in IE9 and above. First we set the child's top position to 50% (middle of the parent). Then using translate rule, shift the child up by a half of its actual height. The main benefit is that we don't need to define child's height, it's calculated by the browser dynamically. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

---

A more modern approach is to use flexbox for this, it is simpler and cleaner. However, flexbox is an entirely different paradigm from what inline-block, float or position used to be.

To align items inside .parent you do:

.parent {
  display: flex;
  align-items: center;
}

That is about it. Children of flex parents are automatically converted to flex child items.

You should read more about flexbox, a good place to start is this cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

참고URL : https://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working