Làm cách nào để tôi có văn bản ở giữa theo chiều dọc bên cạnh hình ảnh trong html / css?

Cách tốt nhất và dễ nhất để căn giữa văn bản theo chiều dọc bên cạnh hình ảnh trong html là gì? Cần phải là phiên bản / loại trình duyệt bất khả tri. Một giải pháp html / CSS thuần túy.

Điều này có thể giúp bạn bắt đầu.

Tôi luôn luôn rơi lại giải pháp này . Không quá hack-ish và hoàn thành công việc.

CHỈNH SỬA: Tôi nên chỉ ra rằng bạn có thể đạt được hiệu ứng bạn muốn với đoạn mã sau (tha thứ cho các kiểu nội tuyến; chúng phải nằm trong một trang tính riêng). Có vẻ như căn chỉnh mặc định trên một hình ảnh (đường cơ sở) sẽ khiến văn bản căn chỉnh theo đường cơ sở; đặt ở giữa sẽ giúp mọi thứ hiển thị đẹp mắt, ít nhất là trong FireFox 3.

<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

"HTML / CSS thuần túy" có loại trừ việc sử dụng bảng không? Vì họ sẽ dễ dàng làm theo ý bạn:

<table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>

Hãy đốt cháy tôi tất cả những gì bạn thích, nhưng điều đó hoạt động (và hoạt động trên các trình duyệt cũ kỹ).

Có một số cách: Sử dụng thuộc tính của thẻ hình ảnh align = "absmiddle" hoặc định vị hình ảnh và văn bản trong vùng chứa DIV hoặc TD trong bảng và sử dụng

style="vertical-align:middle"

Đó là một điều thú vị. Nếu bạn biết trước chiều cao của vùng chứa văn bản, bạn có thể sử dụng chiều cao dòng bằng chiều cao đó và nó phải căn giữa văn bản theo chiều dọc.

Có một vài sự lựa chon:

• Bạn có thể sử dụng chiều cao dòng và đảm bảo nó cao như phần tử chứa
• Sử dụng màn hình: table-cell và vertical align: middle

Tùy chọn ưa thích của tôi sẽ là lựa chọn đầu tiên, nếu đó là một không gian ngắn, hoặc tùy chọn sau nếu không.

Tôi khuyên bạn nên sử dụng các bảng với <td valign="middle">(như inkedmn đã đề cập, nó hoạt động trên tất cả các trình duyệt), nhưng nếu bạn đang bao bọc bằng một liên kết, đây là cách thực hiện (hoạt động trong các trình duyệt cũ xấu xí, như Opera 9):

<a href="/" style="display: block; vertical-align: middle;">
    <img src="/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Sample text</span>
</a>

Một cách cơ bản mà bạn nghĩ đến là đặt mục đó vào một bảng và có hai ô, một ô có văn bản, ô còn lại có hình ảnh và sử dụng style = "valign: center" với các thẻ.