Sắp xếp theo chiều dọc văn bản bên cạnh một hình ảnh?

Tại sao không vertical-align: middlelàm việc? Tuy nhiên, vertical-align: top không hoạt động.

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Trên thực tế, trong trường hợp này khá đơn giản: áp dụng căn chỉnh dọc cho hình ảnh. Vì tất cả trong một dòng, nó thực sự là hình ảnh bạn muốn căn chỉnh, 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ố trí này.

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

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

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

Căn dọc một dòng: giữa

Điều này thật dễ dàng: đặt chiều cao dòng của phần tử văn bản bằng với giá trị 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 đường thẳng đứng: đáy

Hoàn toàn định vị một div bên trong so với container 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

Để làm cho điều này hoạt động 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 tô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 tôi có thể kết hợp cả hai bằng một tính năng khác mà IE không hỗ trợ: 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>

Biến chiều cao container dọc-align: giữa

Giải pháp này đòi hỏi một 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: translateYtài 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ó theo chiều dọc trong phần gốc của nó bất kể chiều cao của phần tử cha:

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

Thay đổi của bạn divthành một thùng chứa flex:

div { display:flex; }

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

Cách 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

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

Bạn phải áp dụng vertical-align: middlecho 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 xung quanh một nửa số x-height của văn bản bên cạnh nó (theo quy định tại các thông số kỹ thuật CSS ). Điều này có thể đủ tốt nhưng có thể trông hơi khác một chút, nếu văn bản có các mức tăng hoặc giảm dần nổi bật ở trên cùng hoặc dưới cùng:

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

Có ai nói về lý do tại sao vertical-align: toplàm việc 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: toptrên phần tử span sau đó chỉ cần đặt nó ở đầu hộp dòng.

Sự khác biệt chính trong hành vi giữa vertical-align: middlevà toplà các yếu 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 để thực hiện tất cả các sắp xếp theo chiều dọc và do đó cảm thấy khá khó đoán ) 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).

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

Nếu bất cứ ai cần định tâm văn bản nhiều dòng theo chiều dọc cho một hình ảnh, đâ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 Thủ thuật CSS này )

Phương pháp # 1: Bảng CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Phương pháp # 2: Phần tử giả trên container ( FIDDLE ) (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 ( FIDDLE ) ( caniuse )

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

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

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>

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

Về cơ bản, bạn sẽ phải truy cập CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Đối với bản ghi, căn chỉnh "các lệnh" không nên hoạt động trên SPAN, vì đó là thẻ nội tuyến , không phải thẻ cấp khối . Những thứ như căn chỉnh, lề, đệm, v.v. sẽ không hoạt động trên thẻ nội tuyến vì điểm nội tuyến không làm gián đoạn luồng văn bản.

CSS chia các thẻ HTML thành hai nhóm: cấp độ nội tuyến và cấp độ khối. Tìm kiếm "khối css vs nội tuyến" và một bài viết tuyệt vời xuất hiện ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Hiểu các nguyên tắc CSS cốt lõi là một chìa khóa để nó không quá khó chịu)

Sử dụng line-height:30pxcho khoảng sao cho văn bản thẳng hàng với hình ảnh:

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

Một điều khác bạn có thể làm là đặt văn bản line-heightthành kích thước của hình ảnh trong <div>. Sau đó đặt hình ảnh thànhvertical-align: middle;

Đó thực sự là cách dễ nhất.

Chưa thấy giải pháp marginnào trong bất kỳ câu trả lời nào, vì vậy đây là giải pháp của tôi cho vấn đề này.

Giải pháp này chỉ hoạt động nếu bạn biết chiều rộng của hình ảnh của bạn.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Tôi thường sử dụng 3px thay cho top. Bằng cách tăng / giảm giá trị đó, hình ảnh có thể được thay đổi theo chiều cao yêu cầu.

Viết các thuộc tính span này

span{
    display:inline-block;
    vertical-align:middle;
}

Sử dụng display:inline-block;Khi bạn sử dụng vertical-alignthuộc tính. Đây là các thuộc tính được xác định

Bạn có thể đặt hình ảnh như inline elementsử dụng thuộc displaytính

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Chẳng hạn, trên một nút trong jQuery mobile, bạn có thể tinh chỉnh nó một chút bằng cách áp dụng kiểu này cho hình ảnh:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Giải pháp đa dòng:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Hoạt động trong tất cả các trình duyệt và eg9 +

Nó có thể gây nhầm lẫn, tôi đồng ý. Hãy thử sử dụng các tính năng bảng. Tôi sử dụng thủ thuật CSS đơn giản này để định vị các phương thức ở trung tâm của trang web. Nó có hỗ trợ trình duyệt lớn:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

và phần CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Lưu ý rằng bạn phải tạo kiểu và điều chỉnh kích thước của hình ảnh và thùng chứa bảng để làm cho nó hoạt động như bạn muốn. Thưởng thức.

Đầu tiên CSS nội tuyến không được khuyến nghị, nó thực sự làm rối HTML của bạn.

Để căn chỉnh hình ảnh và khoảng, bạn chỉ cần làm vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Không chắc chắn về lý do tại sao nó không hiển thị nó trên trình duyệt điều hướng của bạn, nhưng tôi thường sử dụng một đoạn như thế này khi cố gắng hiển thị một tiêu đề với một hình ảnh và một văn bản ở giữa, hy vọng nó sẽ giúp!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Bạn có thể muốn điều này:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Như những người khác đã đề xuất, hãy thử vertical-aligntrên hình ảnh:

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

CSS không gây phiền nhiễu. Bạn không đọc tài liệu . ; P