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

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

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

보다 현대적인 접근 방식은 flexbox를 사용하는 것입니다. 더 간단하고 깔끔합니다. 그러나 인 flexbox는 것과 완전히 다른 패러다임 inline-block, float또는 position하는 데 사용은.

내부 항목을 정렬하려면 .parent다음을 수행하십시오.

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

그게 다야. flex부모 의 자식은 자동으로 플렉스 자식 항목으로 변환됩니다.

flexbox에 대해 자세히 읽어야합니다. 시작하기 좋은 위치는 다음 치트 시트입니다. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

해당 요소 높이를 기준으로 줄 높이 를 설정할 수 있습니다 . 요소 높이가 200px이면 텍스트를 중앙에 배치하려면 줄 높이를 200px로 설정해야합니다.

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

<span>Im vertically center</span>

이것은 컨테이너 div 또는 외부 div에 다음 CSS를 설정해야하는 최신 솔루션입니다.

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

수직으로 중앙에 배치하려는 요소에 다른 다음 솔루션을 적용 할 수 있습니다. 외부 또는 컨테이너 div는

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

외부 또는 컨테이너 div 위치는 상대적이어야합니다.