Căn trung tâm text trong CSS đơn giản bằng mẹo dưới đây

can trung tam hay con goi la can theo chieu doc va chieu ngang trong CSS

Căn trung tâm hay còn gọi là căn giữa cả chiều dọc và chiều ngang trong CSS

Trong CSS, để căn chỉnh Text nằm giữa theo chiều ngang thì chúng ta dùng thuộc tính text-align, còn căn theo chiều dọc thì dùng vertical-align. Còn để căn trung tâm text, hay nói cách khác là căn giữa cả chiều ngang và chiều dọc thì làm như dưới đây nhé !

Đây là trường hợp cụ thể, với một đoạn văn bản nằm trong một cái khung. Nhưng mà nó lệch qua như vậy nhìn xấu, giờ để nó nằm chính giữa thì các bạn xem tiếp bên dưới.

NỘI DUNG VĂN BẢN

Để canh giữa thì đừng cố gắng dùng padding làm gì, không phải là giải pháp tối ưu đâu. Trạng thái CSS lúc này của nó như bên dưới, xem trực tiếp trên CODEPEN

<div style="
    background: #2196F3;
    width: 100%;
    height: 100px;
    color: white;
    ">
    NỘI DUNG VĂN BẢN
</div>

Để nó canh chữ ra chính giữa cái khung thì chúng ta sẽ bổ sung thêm đoạn như bên dưới

display: flex;
flex-direction: column;
justify-content: center;
text-align: center;

Lúc này đoạn code hoàn chỉnh sẽ là

<div style="
    background: #2196F3;
    width: 100%; 
    height: 100px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
   ">
   NỘI DUNG VĂN BẢN
</div>

Và đây là kết quả, các bạn cóp bi dán đè vào cái đoạn mẫu theo link demo CODEPEN ở trên để xem nhé !

NỘI DUNG VĂN BẢN

Rồi, thủ thuật này nó như vậy thôi, cũng khá đơn giản đúng không nào. Cái này được ứng dụng khi nào ? Khi các bạn muốn tạo một nút nhấn bằng HTML, CSS như nút download, nút demo chẳng hạn.

Bài viết có vẻ liên quan

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Bài viết có vẻ liên quan ^ ^
avatar