Dọc căn chỉnh một số văn bản trong một khối <a> tag

Question

Tôi cần một khẩu súng css ở ngoài để giúp tôi với cái này. Tôi có một thẻ là một phần tử khối cố định chiều rộng và chiều cao. Bên trong nó là một hình nền và tiêu đề hình ảnh. Tôi đang cố gắng căn chỉnh văn bản ở phía dưới và tôi không nhận được vị trí nào. Tôi đã thử thực hiện display: table-cell; căn chỉnh dọc: dưới cùng; và tất cả các cách thức khác nhau. Bu không biết đâu. Tôi biết rằng tôi có thể làm dòng chiều cao nhưng có đường chấm kỳ lạ xung quanh yếu tố. Chỉ cần cố gắng có một khoảng với văn bản trong đó trong thẻ và căn chỉnh dọc mà không có niềm vui mặc dù gạch dưới đã di chuyển xuống dưới cùng. Đó là lẻ! Bất kỳ trợ giúp nào được đánh giá cao. Richard

Answer 1

Phần tử cha cần hiển thị: bảng và sau đó phần tử bạn muốn ở dưới cùng hiển thị: ô bảng; align: bottom;

Answer 2

Bạn đang nhắm mục tiêu các trình duyệt nào? Này làm việc tốt cho tôi trong IE8.0.6 và FireFox 3.5.8:

<a style="display:block;height:200px;width:200px;background:blue;display:table-cell;vertical-align:bottom;">This is a test</a> 

Note Tôi đã sử dụng cả hai display:table-cell; và vertical-align:bottom;. Bạn cần cả hai; đã không chắc chắn nếu bạn đã thử điều đó.

Nếu điều đó gây khó khăn cho bạn (bạn nhắm mục tiêu IE6?), Bạn sẽ phải đặt phần tử <a> trong phần tử cấp khối và sau đó định vị nó.

<div style="position:relative;top:0px;left:0px;height:200px;width:200px;background:yellow;"> 
    <a style="position:absolute;bottom:0px;">Your text</a> 
</div>