Hướng dẫn
Quảng cáo

Cách căn chỉnh văn bản ở giữa theo chiều dọc trong phần tử DIV bằng CSS

Chủ đề: HTML / CSSBài trước|Bài tiếp

Trả lời: Sử dụng thuộc tính CSS line-height

Nếu bạn cố gắng căn giữa văn bản theo chiều dọc bên trong một div bằng cách sử dụng quy tắc CSS, vertical-align: middle; bạn sẽ không thành công. Giả sử bạn có một phần tử div với chiều cao là 50px và bạn đã đặt một số liên kết bên trong div mà bạn muốn căn chỉnh theo chiều dọc ở giữa. Cách đơn giản nhất để làm điều đó là - chỉ cần áp dụng thuộc line-height tính có giá trị bằng chiều cao của div 50px.

Khái niệm đằng sau thủ thuật này là, nếu giá trị của thuộc line-heigh ttính lớn hơn giá trị của font-size phần tử cho một phần tử, thì sự khác biệt (được gọi là "leading") sẽ được cắt đôi và phân bổ đồng đều trên đầu và cuối của hộp nội dòng căn chỉnh các phần tử nội tuyến ở giữa theo chiều dọc với phần tử.

Hãy thử ví dụ sau để hiểu cách nó hoạt động thực sự:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Center Text Using CSS</title>
<style>
    .menu{
        height: 20px;
        line-height: 20px;
        padding: 15px;        
        border: 1px solid #666;
    }
</style>
</head>
<body>
    <div class="menu">
        <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
    </div>
</body>
</html>

Câu hỏi liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:

Advertisements