Sắp xếp thẳng đứng theo từng ô không hoạt động

Question

Tôi đang cố gắng căn giữa văn bản theo chiều ngang và theo chiều dọc bằng cách sử dụng DIV và loại hiển thị dưới dạng ô bảng nhưng không hoạt động ở cả IE8 hoặc Firefox.

Dưới đây là CSS mà tôi đang sử dụng và đó là tất cả những gì có trong trang html.

@charset "utf-8"; 
/* CSS Document */ 
html, body 
{ 
    background-color:#FFFFFF; 
    font-family:Arial, Helvetica, sans-serif; 
    margin: 0; 
    padding: 0; 
    padding-top: 5px; 
} 
div.Main 
{ 
    background-color:#FFFFFF; 
    border-collapse:collapse; 
    width:800px; 
    margin-left:auto; 
    margin-right:auto; 
} 
div.MainHeader 
{ 
    color:#C00000; 
    font-size:18pt; 
    font-weight:bold; 
    text-align:center; 
    width:800px; 
} 
div.BlackBox 
{ 
    background-color:#000000; 
    color:#FFFF00; 
    display:table-cell; 
    float:left; 
    font-size:18pt; 
    font-weight:bold; 
    height:191px; 
    text-align:center; 
    vertical-align:middle; 
    width:630px; 
} 
div.BlackBoxPicture 
{ 
    background-color:#000000; 
    float:right; 
    height:191px; 
    margin-top:auto; 
    margin-bottom:auto; 
    text-align:right; 
    vertical-align:bottom; 
    width:170px; 
} 

Tôi đang làm gì sai?

Answer 1

Tôi nghĩ rằng table-cell cần có phần tử gốc display:table.

Answer 2

Bạn có thể căn chỉnh theo chiều dọc phần tử nổi theo cách hoạt động trên IE 6+. Nó không cần đánh dấu bảng đầy đủ. Phương pháp này không hoàn toàn trong sạch - bao gồm trình bao bọc và có một vài điều cần lưu ý, ví dụ: nếu bạn có quá nhiều văn bản vượt quá vùng chứa - nhưng nó khá tốt.

---

Câu trả lời ngắn: Bạn chỉ cần áp dụng display: table-cell đến một yếu tố bên yếu tố nổi (tế bào bảng không nổi), và sử dụng một fallback với position: absolute và top cho IE cũ.

---

Long trả lời: Dưới đây là một jsfiddle showing the basics. Nội dung quan trọng được tóm tắt (với nhận xét có điều kiện thêm lớp .old-ie):

.wrap { 
     float: left; 
     height: 100px; /* any fixed amount */ 
    } 
    .wrap2 { 
     height: inherit; 
    } 
    .content { 
     display: table-cell; 
     height: inherit; 
     vertical-align: middle; 
    } 

    .old-ie .wrap{ 
     position: relative; 
    } 
    .old-ie .wrap2 { 
     position: absolute; 
     top: 50%; 
    } 
    .old-ie .content { 
     position: relative; 
     top: -50%; 
     display: block; 
    } 

Đây là một jsfiddle that deliberately highlight the minor faults với phương pháp này. Lưu ý cách thực hiện:

• Trong trình duyệt tiêu chuẩn, nội dung vượt quá chiều cao của phần tử trình bao dừng dừng giữa và bắt đầu đi xuống trang. Đây không phải là một vấn đề lớn (có thể trông đẹp hơn là leo lên trang), và có thể tránh được bằng cách tránh nội dung quá lớn (lưu ý rằng trừ khi tôi bỏ qua điều gì đó, các phương thức tràn như overflow: auto; dường như không hoạt động)
• Trong IE cũ, phần tử nội dung không kéo dài để lấp đầy khoảng trống có sẵn - chiều cao là chiều cao của nội dung chứ không phải của vùng chứa.

Đó là những hạn chế khá nhỏ nhưng đáng được biết đến.

Code and idea adapted from here

Answer 3

Đây là cách tôi làm điều đó:

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    display: table 
} 
#content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle 
} 

HTML:

<div id="content"> 
    Content goes here 
</div> 

Xem

Example of vertical centering

và

CSS: centering things.

Answer 4

Bởi vì bạn vẫn còn sử dụng phao ...

cố gắng để loại bỏ "phao" và quấn nó với display: table

dụ:

<div style="display:table"> 
<div style="display:table-cell;vertical-align:middle;text-align:center"> 
     Hai i'm center here Lol 
</div> 
</div> 

Answer 5

Đặt chiều cao cho các phần tử cha mẹ.

Answer 6

nổi nó với wrapper khác mà không cần sử dụng display: table;, nó hoạt động:

<div style="float: right;"> 
    <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div> 
</div> 

Answer 7

thấy bin này: http://jsbin.com/yacom/2/edit

nên đặt yếu tố phụ huynh để

display:table-cell; 
vertical-align:middle; 
text-align:center; 

Answer 8

Đôi khi nổi phanh dọc sắp xếp, tốt hơn là tránh chúng.

Answer 9

Một yếu tố theo kiểu như sau sẽ được sắp xếp theo chiều dọc để giữa:

.content{ 
    position:relative; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    top:50%; 
} 

Tuy nhiên, các yếu tố phụ huynh phải có chiều cao cố định. Xem fiddle này: https://jsfiddle.net/15d0qfdg/12/

Answer 10

Trong trường hợp của tôi, tôi muốn căn giữa trong vùng chứa chính có vị trí: tuyệt đối.

<div class="absolute-container"> 
    <div class="parent-container"> 
     <div class="centered-content"> 
      My content 
     </div> 
    </div> 
</div> 

Tôi phải thêm một số vị trí ở trên cùng, dưới cùng, bên trái &.

.absolute-container { 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
} 

.parent-container { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    display: table 
} 

.centered-content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle 
}