"vertical-align: middle" không căn chỉnh ở giữa trong Firefox

Tôi đang cố gắng căn chỉnh một số văn bản có kích thước khác nhau theo chiều dọc, tuy nhiên, Firefox hiển thị văn bản nhỏ hơn phía trên giữa."vertical-align: middle" không căn chỉnh ở giữa trong Firefox

CSS:

div.categoryLinks { 
    margin: 1em 16px; 
    padding: 0 4px; 
    border-width: 1px 0; 
    border-style: solid; 
    border-color: #ece754; 
    background: #f7f5b7; 
    color: #a49f1c; 
    text-align: center; 
    font-size: 1.4em; 
} 
div.categoryLinks em { 
    font-size: 0.6em; 
    font-style: normal; 
    vertical-align: middle; 
}

HTML:

<div class="categoryLinks"> 
    <em>SECTION:</em> 
    Page One &#183; 
    Page Two &#183; 
    <a href="link">Page Three</a> 
</div>

Ảnh chụp màn hình: screenshot http://www.doheth.co.uk/files/valign.jpg

CẬP NHẬT: chỉ để được rõ ràng, tôi ý thức hơn hoặc ít hơn như thế nào vertical-align công trình , tức là tôi đã biết những quan niệm sai lầm phổ biến.

Từ điều tra thêm, có vẻ như cách đơn giản nhất để khắc phục sự cố này là bao trùm văn bản lớn hơn trong một số span và đặt vertical-align trên đó. Hai con của .categoryLinks sau đó căn chỉnh tương đối với nhau. Trừ khi ai đó có thể hiển thị một cách tốt hơn mà không cần đánh dấu thêm?

Nguồn

2009-04-08 DisgruntledGoat

Căn chỉnh dọc chỉ hoạt động như mong đợi trên ô bảng hoặc phần tử chặn nội tuyến. Nếu bạn muốn biết thêm thông tin, tôi đề nghị bạn đọc Understanding vertical-align, or "How (Not) To Vertically Center Content".

Chỉnh sửa: Bạn có thứ gì đó khác đang diễn ra vì nó hoạt động với tôi như trên Firefox. Tôi thậm chí còn giảm kích thước phông chữ của PHẦN: phải xuống và nó vẫn ở giữa. Bạn đã sử dụng Firebug để xem CSS nào khác đang ảnh hưởng đến nó chưa?

này hoạt động như là:

<html> 
<head> 
<style type="text/css"> 
div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 
} 
div.categoryLinks em { 
     font-size: 0.4em; 
     font-style: normal; 
     vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<div class="categoryLinks"> 
     <em>SECTION:</em> 
     Page One &#183; 
     Page Two &#183; 
     <a href="link">Page Three</a> 
</div> 
</body>

Lưu ý: font size phần thay đổi để 0.4em 0.6em từ ban đầu để nhấn mạnh điểm.

Nguồn

2009-04-08 22:33:57 cletus

Chỉ cần thêm vào điều này, bạn có thể thử 'display: table-cell' nhưng tôi không chắc chắn hỗ trợ của trình duyệt là gì. – inspite

Anh ấy đang nói về text-align: thuộc tính CSS trung tâm, không phải là về thuộc tính HTML valign. –

@ buti-oxa: Không, anh ấy không. Anh ấy đang nói về thuộc tính dọc theo chiều dọc CSS – KOGI

Firefox hiển thị chính xác. Thuộc tính vertical-align là inline, có nghĩa là nó không áp dụng cho các phần tử khối như < div> (và < p>, v.v.). Thử thêm màn hình : nội tuyến và xem có hoạt động không.

Nguồn

2009-04-08 22:32:22 sli

Hoặc, có thể là chặn nội dòng. Tùy thuộc vào việc thực hiện (và hỗ trợ trình duyệt chéo) nó có thể cung cấp tốt nhất của cả hai thế giới. –

Ông áp dụng nó cho PHẦN: đã được đặt nội tuyến theo mặc định. –

Đặt con thành khối nội tuyến không tạo nên sự khác biệt, nó vẫn cao hơn trong Firefox. – DisgruntledGoat

Căn chỉnh dọc chỉ được áp dụng cho các phần tử chặn nội tuyến (tôi nghĩ hình ảnh là những thứ duy nhất có thuộc tính bố cục này theo mặc định), để sử dụng nó để định vị phần tử nội tuyến, trước tiên hãy biến nó thành một khối nội tuyến , sau đó bạn có thể sử dụng margin và padding để định vị nó tương tự như cách bạn woudl một yếu tố khối bình thường:

div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 

} 
div.categoryLinks em { 
      font-size: 0.6em; 

      display:inline-block; 
     vertical-align:top; 
     font-style: normal; 
     padding: 2px 0 0 0; 

}

bạn phải tweak it a little for firefox 2 Mặc dù vậy, nhưng điều này là do một ví dụ raer của firefox không hỗ trợ các chuẩn web. Mặt khác, bạn không thể bận tâm với các tinh chỉnh như vài người vẫn còn sử dụng ffx2, và nó chỉ là một lỗ hổng thiết kế rất nhỏ.

Nguồn

2009-04-08 22:33:37 wheresrhys

Đặt con thành khối nội tuyến không tạo nên sự khác biệt, nó vẫn cao hơn trong Firefox. – DisgruntledGoat

nhưng điểm là khi bạn đã hiển thị: inline-block bạn có thể thêm một số padding-top cho em quá để đẩy nó xuống. – wheresrhys

Tôi đã gặp vấn đề tương tự. Này làm việc cho tôi:

<style type="text/css"> 
    div.parent { 
     position: relative; 
    } 

    /*vertical middle and horizontal center align*/ 
    img.child { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    </style> 

    <div class="parent"> 
     <img class="child"> 
    </div>

Nguồn

2013-01-26 19:45:34 algreat

Tôi cố định vấn đề này chỉ cần loại bỏ:

white-space: nowrap;

từ div cha mẹ. Tôi không chắc chắn lý do nhưng với quy tắc này được thêm vào, Firefox không áp dụng:

vertical-align: middle;

Nguồn

2014-04-10 15:40:48 robertovg

"vertical-align: middle" không căn chỉnh ở giữa trong Firefox

Trả lời

Các vấn đề liên quan