line-height dưới dạng phần trăm không hoạt động

Tôi đang gặp vấn đề với chiều cao dòng mà tôi không thể hiểu được.

Đoạn mã sau sẽ căn giữa một hình ảnh trong một 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>

Tuy nhiên, nếu tôi thay đổi chiều cao dòng thành 100%, thì chiều cao dòng sẽ không có hiệu lực (hoặc ít nhất không trở thành 100% của div).

Ví dụ jsfiddle

Có ai biết tôi đang làm gì sai không?

line-height: 100%có nghĩa là 100% kích thước phông chữ cho phần tử đó, không phải 100% chiều cao của nó. Trong thực tế, chiều cao dòng luôn luôn là tương đối so với kích thước font chữ, không phải là chiều cao, trừ khi giá trị của nó sử dụng một đơn vị chiều dài tuyệt đối ( px, pt, vv).

Tôi biết câu hỏi này đã cũ, nhưng tôi đã tìm thấy giải pháp hoàn hảo cho tôi.

Tôi thêm css này vào div mà tôi muốn căn giữa:

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

Điều này hoạt động mọi lúc và nó sạch sẽ.

Chỉnh sửa: Chỉ vì mục đích hoàn thành, tôi sử dụng scss và tôi có một hỗn hợp tiện dụng mà tôi đưa vào cho mọi phụ huynh có con trực tiếp mà tôi muốn căn giữa theo chiều dọc:

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

Giải thích đầy đủ: div:beforesẽ thêm một phần tử bên trong div, nhưng trước bất kỳ phần tử nào trong số các phần tử con của nó. Khi sử dụng :beforehoặc :afterchúng ta phải sử dụng một content:khai báo nếu không sẽ không có gì xảy ra, nhưng đối với mục đích của chúng ta, nội dung có thể để trống. Sau đó, chúng tôi yêu cầu phần tử cao bằng phần tử gốc của nó, miễn là chiều cao phần tử gốc của nó được xác định và phần tử này ít nhất là khối nội tuyến. vertical-alignxác định vị trí dọc của bản thân liên quan đến cha mẹ, trái ngược với vị trí text-alignđó hoạt động khác.

Các @mixintuyên bố dành cho người dùng sass và nó sẽ được sử dụng như thế này:

div {
    @include vertical-align(middle)
}

Khi bạn sử dụng tỷ lệ phần trăm làm chiều cao dòng, nó không dựa trên vùng chứa div mà dựa trên kích thước phông chữ.

line-height: 100% sẽ là một cách dễ dàng để căn giữa các phần tử theo chiều dọc, nếu nó được tính toán liên quan đến vùng chứa, nhưng điều đó quá dễ dàng, do đó nó không hoạt động.

Vì vậy, thay vào đó, nó chỉ là một cách nói khác của chiều cao dòng: 1em (phải không?)

Một cách khác để căn giữa một phần tử theo chiều dọc sẽ là:

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

có thể không đẹp, nhưng nó hoạt động và ngữ nghĩa của nó;

<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 cung cấp cho một phần tử độ toàn vẹn của bảng duy nhất để căn chỉnh theo chiều dọc (ít nhất tôi nghĩ nó là duy nhất)

Đây là một câu trả lời rất muộn, tuy nhiên trong các trình duyệt hiện đại, giả sử rằng phần tử mẹ cũng bằng 100% chiều cao màn hình, bạn có thể sử dụng vhđơn vị khung nhìn. VĨ CẦM

line-height: 100vh;

Hỗ trợ trình duyệt

Giải pháp này hoạt động trên IE9 trở lên. Đầu tiên, chúng tôi đặt vị trí trên cùng của đứa trẻ là 50% (giữa của cha mẹ). Sau đó, sử dụng translatequy tắc, di chuyển đứa trẻ lên bằng một nửa chiều cao thực của nó. Lợi ích chính là chúng ta không cần xác định chiều cao của trẻ, nó được trình duyệt tính toán một cách động. JSFiddle

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

Một cách tiếp cận hiện đại hơn là sử dụng flexbox cho việc này, nó đơn giản và gọn gàng hơn. Tuy nhiên, flexbox là một mô hình hoàn toàn khác với những gì inline-block, floathoặc positionđã qua sử dụng được.

Để căn chỉnh các mục bên trong .parentbạn làm:

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

Đó là về nó. Con cái của flexcha mẹ được tự động chuyển đổi thành các mục con linh hoạt.

Bạn nên đọc thêm về flexbox, một nơi tốt để bắt đầu là cheat sheet này: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bạn có thể đặt chiều cao dòng dựa trên chiều cao phần tử đó. Nếu chiều cao phần tử 200px có nghĩa là bạn cần đặt chiều cao dòng thành 200px để căn giữa văn bản.

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

<span>Im vertically center</span>

Đây là giải pháp hiện đại trong đó bạn cần đặt CSS sau trong div chứa hoặc div bên ngoài.

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

Một giải pháp khác sau đây có thể được áp dụng cho phần tử mà bạn muốn căn giữa theo chiều dọc. Lưu ý rằng div bên ngoài hoặc vùng chứa phải là

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

Lưu ý rằng vị trí div bên ngoài hoặc vùng chứa phải tương đối.