작동하지 않는 백분율로 표시되는 줄 높이 height: 800px;

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

다음 코드는 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)
}

답변

백분율을 줄 높이로 사용하면 div 컨테이너를 기반으로하지 않고 글꼴 크기를 기반으로합니다.

답변

line-height : 100 %는 컨테이너와 관련하여 계산 된 경우 요소를 수직으로 가운데에 맞추는 쉬운 방법이지만 너무 쉬울 것이므로 작동하지 않습니다.

그래서 대신 line-height를 말하는 또 다른 방법입니다 : 1em (맞습니까?)

요소를 수직으로 중앙에 배치하는 또 다른 방법은 다음과 같습니다.

.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" */
}

답변

예쁘지 않을 수도 있지만 작동하고 의미가 있습니다.

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

디스플레이 : 테이블 셀은 요소에 수직으로 정렬 할 수있는 고유 한 테이블 기능을 제공합니다 (적어도 고유하다고 생각합니다).

답변

이것은 매우 늦은 답변이지만 최신 브라우저에서는 부모 요소가 화면 높이의 100 %라고 가정하면 vh뷰포트 단위를 사용할 수 있습니다 .
깡깡이

line-height: 100vh;

브라우저 지원

답변

이 솔루션은 IE9 이상에서 작동합니다. 먼저 자녀의 상위 순위를 50 % (부모의 중간)로 설정했습니다. 그런 다음 translate규칙을 사용하여 실제 키의 절반만큼 아이를 위로 이동합니다. 주요 이점은 어린이의 키를 정의 할 필요가 없으며 브라우저에서 동적으로 계산된다는 것입니다. JSFiddle

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