Câu hỏi Sắp xếp văn bản theo chiều dọc bên cạnh hình ảnh?


Tại sao không vertical-align: middle công việc? Chưa hết, vertical-align: top  làm công việc.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

1686
2018-01-28 21:01


gốc


Đây là một bài viết thú vị: Hiểu vertical-align - Phaedrus
Chắc chắn không thể bước vào và bảo vệ CSS từ một quan điểm ngôn ngữ, nhưng rất nhiều sự thất vọng của tôi là từ thực tế là chỉ một số tính năng hoạt động tùy thuộc vào trình duyệt bạn đang ở. Ngay cả ngày hôm nay, khi "cuộc chiến trình duyệt" hiện đại nhiều hơn về những người tuân theo các tiêu chuẩn tốt nhất, vẫn còn có rất nhiều cảnh báo và thực sự giới hạn danh sách tính năng. - Mattygabe
Heresy: <td> img </ td> <td valign = "trung"> văn bản </ td> - T4NK3R
648+ người sẽ nghĩ rằng tôi điên nhưng câu trả lời được chấp nhận đã không làm việc cho tôi. Tuy nhiên điều này đã làm ... <div> <img style = "width: 30px; height: 60px; vertical-align: middle"> <span style = "height: 60px; vertical-align: middle"> Works. </ Span > </ div> - Zach


Các câu trả lời:


Trên thực tế, trong trường hợp này nó khá đơn giản: áp dụng căn chỉnh thẳng đứng cho hình ảnh. Vì tất cả trong một dòng, đó thực sự là hình ảnh bạn muốn căn chỉnh, chứ không phải văn bản.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Thử nghiệm trong FF3.

Bây giờ bạn có thể sử dụng flexbox cho kiểu bố cục này.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1902
2018-01-28 21:10



Thử nghiệm trong IE 6 & 7. Làm việc một điều trị. - Ben
"Vì nó là tất cả trong một dòng, nó thực sự là hình ảnh bạn muốn liên kết, không phải là văn bản." - Không, hình ảnh vẫn ổn. Chúng tôi muốn văn bản được căn chỉnh. Không phải hình ảnh. - Tôi nhận được rằng điều này hoạt động (trong một số trường hợp, ví dụ: khi bạn không sử dụng "float: left" trên hình ảnh ...), nhưng nó chỉ kỳ lạ và không trực quan để di chuyển văn bản theo chiều dọc bạn sẽ phải áp dụng thuộc tính cho hình ảnh bên cạnh thay vào đó. - BrainSlugs83
@ BrainSlug83 Nó chắc chắn không kỳ quái nhưng tôi có thể thấy những người mới có thể bị vấp ngã bởi điều này như thế nào. Theo mặc định, một hình ảnh sẽ được đặt trên đường cơ sở. Tất cả những gì bạn đang làm là di chuyển nơi ảnh được đính kèm liên quan đến văn bản. Đối với việc sử dụng float: trái, bạn nên làm điều đó hoặc là trên khối có chứa hình ảnh và văn bản, hoặc trên chính văn bản. - jamesrom
@ BrainSlugs83 Đồng ý rằng nó có thể được xem là phản trực giác. Phải mất một chút thay đổi về tinh thần, bởi vì theo CSS, những gì bạn cần làm là căn giữa hình ảnh vào văn bản. Không phải là văn bản cho hình ảnh. - Greg Pettit
Nó không hoạt động nếu bạn tăng span cỡ chữ. Xem câu trả lời của tôi. - Mori


Dưới đây là một số kỹ thuật đơn giản cho căn chỉnh dọc:

Căn chỉnh một đường thẳng đứng: giữa

Điều này dễ dàng: đặt chiều cao dòng của phần tử văn bản bằng với phần tử của vùng chứa

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Nhiều dòng dọc căn chỉnh: dưới cùng

Hoàn toàn định vị một div bên trong liên quan đến vùng chứa của nó

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Nhiều đường thẳng đứng: giữa

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Nếu bạn phải hỗ trợ các phiên bản IE cũ <= 7

Để có được điều này để làm việc một cách chính xác trên bảng, bạn sẽ phải hack CSS một chút. May mắn thay, có một lỗi IE hoạt động có lợi cho chúng ta. Cài đặt top:50% trên container và top:-50% trên div bên trong, bạn có thể đạt được kết quả tương tự. Chúng ta có thể kết hợp cả hai bằng cách sử dụng một tính năng khác mà IE không hỗ trợ: các bộ chọn CSS nâng cao.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Chiều cao vùng chứa thay đổi dọc: giữa

Giải pháp này yêu cầu trình duyệt hiện đại hơn một chút so với các giải pháp khác, vì nó sử dụng transform: translateY bất động sản. (http://caniuse.com/#feat=transforms2d)

Áp dụng 3 dòng CSS sau đây cho một phần tử sẽ căn giữa nó trong phần tử cha của nó bất kể chiều cao của phần tử gốc:

position: relative;
top: 50%;
transform: translateY(-50%);

317
2018-01-28 21:45



Các display:table và display:table-cell Bộ chọn CSS hoạt động tốt, ngoại trừ, tất nhiên, trong IE7 trở xuống. Sau khi rách tóc ra trong vài giờ, tôi quyết định rằng tôi không thực sự cần phải đối phó với bất cứ ai vẫn sử dụng IE7-. - banncee
display:table có một số hạn chế trong các trình duyệt khác nhau (trong IE11 max-height không hoạt động nếu phần tử nằm bên trong một ô bảng), vì vậy trong một số trường hợp cạnh, bạn không nên căn chỉnh theo chiều dọc bằng cách sử dụng các ô bảng. - jahu
Cho phép Internet Explorer REST TRONG PEACE - Ĭsααc tիε βöss


Thay đổi div vào một thùng chứa flex:

div {display:flex;}


Bây giờ có hai phương pháp để căn giữa các sắp xếp cho tất cả nội dung:

Phương pháp 1:

div {align-items:center;}

BẢN GIỚI THIỆU 


Cách 2:

div * {margin-top:auto; margin-bottom:auto;}

BẢN GIỚI THIỆU 


Thử các giá trị chiều rộng và chiều cao khác nhau trên img và các giá trị kích thước phông chữ khác nhau trên span và bạn sẽ thấy chúng luôn ở giữa thùng chứa.


79
2018-03-24 07:54



Điều này làm việc tuyệt vời cho tôi trong Firefox! ... nhưng dường như nó không hoạt động trong Chrome (sử dụng phiên bản 42) - Chris
Nó hoạt động trong phiên bản Chrome mới nhất, 42.0.2311.90 m, không có vấn đề gì. - Mori
cách đơn giản nhất hoạt động với các kích thước phông chữ khác nhau - woojoo666
Để căn giữa văn bản bên cạnh hoặc giữa các hình ảnh (theo chiều ngang trên trang), bạn cũng cần phải thêm justify-content: center; và cho khoảng cách (không sử dụng <br/> thẻ) bạn cũng có thể muốn ném vào padding: 1em;. Cập nhật tuyệt vời cho chúng tôi những người phát triển trình duyệt hiện đại. - CSS
Cảm ơn bạn. Vì lý do gì đó, đây là câu trả lời duy nhất (trong số này, và những câu hỏi trên) có hiệu quả đối với tôi. - inspirednz


Bạn phải áp dụng vertical-align: middle cho cả hai yếu tố để nó được tập trung hoàn hảo.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

Các câu trả lời được chấp nhận làm trung tâm biểu tượng khoảng một nửa chiều cao x của văn bản bên cạnh nó (như được định nghĩa trong Thông số CSS). Mà có thể là đủ tốt nhưng có thể nhìn một chút đi, nếu văn bản có ascenders hoặc descenders đứng ra chỉ ở trên hoặc dưới:

centered icon comparison

Ở bên trái, văn bản không được căn chỉnh, ở bên phải văn bản như được hiển thị ở trên. Bản trình diễn trực tiếp có thể được tìm thấy trong bài viết về căn chỉnh dọc.

Có ai nói về lý do tại sao không vertical-align: top hoạt động trong kịch bản? Hình ảnh trong câu hỏi có thể cao hơn văn bản và do đó xác định cạnh trên của hộp dòng. vertical-align: top trên phần tử span sau đó chỉ định vị nó ở đầu hộp.

Sự khác biệt chính trong hành vi giữa vertical-align: middle và top là phần tử di chuyển đầu tiên liên quan đến đường cơ sở của hộp (được đặt ở bất cứ nơi nào cần thiết để đáp ứng tất cả các sắp xếp thẳng đứng và do đó cảm thấy không thể đoán trước) và thứ hai liên quan đến giới hạn bên ngoài của hộp đường (đó là hữu hình hơn).


68
2017-09-11 12:58



Trên thực tế câu trả lời này thực sự đã giúp tôi, mặc dù mega-upvote của câu trả lời được chấp nhận. Thanx! - Bernoulli IT
Đây thực sự là một câu trả lời tuyệt vời. Tôi luôn luôn giả định rằng vấn đề nhỏ-off-of-dọc-trung tâm thực sự không thể được giải quyết mà không cần thủ đoạn. - Brad
Tôi đồng ý, câu trả lời này đã được sạch sẽ và dễ dàng, và làm việc. Nó cũng không phụ thuộc vào css3 không được hỗ trợ không nhất quán, v.v. - Lizardx
Điều này hoạt động tốt với các kích thước phông chữ khác nhau. - Robert Moore
Tôi nhận thấy các tác phẩm hàng đầu và các tác phẩm phía dưới nhưng không phải là trung bình. Về cơ bản, "trung bình" không được định nghĩa là nửa chừng giữa đầu và cuối. Nó có nghĩa là "khi nó cao hơn văn bản, hãy chú ý cả hai cách". Và ở đây bạn không cần phải căn chỉnh theo chiều dọc: ở giữa văn bản, chỉ là hình ảnh. - Curtis


Kỹ thuật được sử dụng trong câu trả lời được chấp nhận chỉ hoạt động cho văn bản một hàng (bản giới thiệu), nhưng không phải văn bản nhiều dòng (bản giới thiệu) - như đã lưu ý ở đó.

Nếu bất kỳ ai cần phải căn giữa theo chiều dọc văn bản nhiều hàng với một hình ảnh, dưới đây là một vài cách (Phương pháp 1 và 2 lấy cảm hứng từ bài viết CSS-Tricks này)

Phương pháp # 1: Bảng CSS (VĨ CẦM) (IE8 + (caniuse))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Phương pháp # 2: Phần tử giả trên vùng chứa (VĨ CẦM) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Phương pháp # 3: Flexbox (VĨ CẦM) (caniuse)

CSS (Fiddle trên chứa tiền tố của nhà cung cấp):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

47
2017-12-24 21:06



# 1 phương pháp hoạt động tuyệt vời! Tôi có 2 div - một là có văn bản - khác - một hình ảnh. Và bây giờ cả hai đều nằm ở giữa. Và rất dễ dàng. Thử nghiệm trong FF34.0.5 và IE8. Cảm ơn thực sự. - Ernestas Gruodis
Các phương thức hoạt động tốt nếu hình ảnh lớn hơn (chiều cao) so với văn bản. Nhưng nếu hình ảnh nhỏ hơn thì tất cả trừ cái cuối cùng thất bại - Thomas


Mã này hoạt động trong IE cũng như FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

23
2017-07-02 14:41



Đây không phải là câu trả lời giống như câu trả lời đã được đưa ra trong năm 2009 và đã được chấp nhận là đúng không? - Mr Lister
Có ... nhưng với ít thay đổi "tự động" để tránh hardcoding - HTMLnewBie


Bởi vì bạn phải đặt line-height đến chiều cao của div để làm việc này


16
2018-01-28 21:05



Tuy nhiên, thực hiện điều này trong các bảng sẽ đạt được với "vertical-align: center". CSS thổi. - sam
Tôi đã thử đặt chiều cao dòng thành 30px và nó vẫn không hoạt động. - sam