Các phần tử ở giữa theo chiều dọc trong CSS

Question

Tôi có hai phần tử cạnh nhau. Phần tử 2 nhỏ hơn Element 1. Cả hai phần tử không có chiều cao cố định. Tôi cần phải theo chiều dọc trung tâm Element 2. Làm thế nào để đạt được điều này bằng cách sử dụng CSS?

được sửa đổi:

Đây là những gì tôi có cho đến nay: chiều cao

<div id="container" style="width: 100%;"> 
    <div id="img1" style="float: left;"> 
     <img src="image1.jpg".../> 
    </div> 
    <div id="img2" style="float: right;"> 
     <img src="image2.jpg".../> 
    </div> 
</div> 

img1 sẽ luôn luôn lớn hơn chiều cao img2 của. Tôi muốn img2 được căn chỉnh theo phương thẳng đứng. Hy vọng rằng điều này làm rõ những gì tôi đang cố gắng để đạt được.

Answer 1

Cách đơn giản và rõ ràng nhất để thực hiện việc này là sử dụng display: table và căn chỉnh dọc. Tuy nhiên, IIRC (nó đã được một thời gian kể từ khi tôi đã lên trên các vấn đề tương thích trình duyệt) hỗ trợ cho display: table và bạn bè vắng mặt từ ... một số phiên bản phổ biến sau đó của IE, có lẽ? Dù sao, thêm các quy tắc khác để thực hiện một dự phòng đầy đủ nếu display: table bị bỏ qua có thể là tốt.

<div id="container" style="display: table;"> 
    <div id="div1" style="display: table-cell; vertical-align: middle;"> 
     <img id="img1" src="image1.jpg" /> 
    </div> 
    <div id="div2" style="display: table-cell; vertical-align: middle;"> 
     <img id="img2" src="image2.jpg" /> 
    </div> 
</div> 

(Tất nhiên phong cách nên được trong một stylesheet, điều này chỉ là phù hợp với ví dụ ban đầu của bạn và không biết trường hợp sử dụng.)

Các display giá trị table, table-row, và table-cell về cơ bản thực hiện chính xác như HTML table, tr và td, nhưng bạn được phép bỏ qua bất kỳ điều gì trong số đó (như tôi làm ở đây, sử dụng trực tiếp table-cell s) và công cụ bố cục sẽ làm điều hợp lý.

Answer 2

Đặt cả hai vào bên trong một phần tử khác, cho nó một chiều rộng tối thiểu và đặt lề trái và phải để tự động.

Answer 3

Không dễ dàng. Một số hack phổ biến bao gồm sử dụng display: table-cell và parent sử dụng display: table (tôi không nhớ nếu thuộc tính valign = "center" là cần thiết), hoặc sử dụng định vị tuyệt đối với top: 45% hoặc hơn (không chính xác, nhưng OK cho các yếu tố nhỏ).

Để xác định phương pháp tốt nhất, chúng tôi cần biết thêm về bố cục của bạn. Họ tập trung ở đâu? Liệu/có thể có khoảng cách Y lớn giữa các phần tử 1 và 2 không? Cha mẹ của họ có chiều cao cố định không? Cả hai đều có cùng cha mẹ, hoặc là một anh chị em của người kia? Bạn đang sử dụng phương pháp nào để đặt chúng cạnh nhau? Hãy nhớ rằng nhiều thủ thuật yêu cầu hack bổ sung để làm việc trong IE, và việc sử dụng Javascript chỉ là gian lận và sẽ làm cho trang web của bạn không thể truy cập/gây phiền nhiễu cho những người có thị lực kém (ai có thể sử dụng trình đọc màn hình không biết), những người bị tắt script (đặc biệt là trên trình duyệt di động hoặc trình duyệt dòng lệnh có thể không hỗ trợ tốt), công cụ tìm kiếm, v.v. Có thể chỉ sử dụng CSS (mặc dù bạn có thể phải thêm một số thành phần vùng chứa), nhưng chính xác phương pháp phụ thuộc chính xác những gì bạn đang làm.

Answer 4

Tôi không nghĩ bạn có thể thực hiện điều này một cách đáng tin cậy mà không có bảng. Giải pháp của Kevin có thể sẽ hoạt động, trừ khi bạn cần hỗ trợ IE (mà hầu hết chúng ta đều làm). Và, trong trường hợp này, đánh dấu bảng có thể thực sự nhỏ hơn đánh dấu dựa trên div.

Answer 5

Nếu bạn chỉ cần hỗ trợ các trình duyệt mới như Safari (ví dụ: xây dựng webapp cho iPhone), CSS3 cung cấp một cách tiếp cận thanh lịch không có nổi hoặc lợi nhuận tiêu cực. Mọi chi tiết tại đây: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center