Chúng ta có thể căn chỉnh văn bản trong tài liệu HTML bằng thuộc tính text-align cho căn chỉnh ngang và padding-top với padding-bottom, hoặc line-height cho căn chỉnh dọc.
Cú pháp
Cú pháp cho các thuộc tính CSS trên:
Selector { text-align: center | left | right | justify | inherit | initial; } Selector { padding: /*giá trị*/; } Selector { line-height: /*giá trị*/; }
Ví dụ căn chỉnh ngang:
Ví dụ
<!DOCTYPE html> <html> <head> <title>CSS Text Alignment</title> <style> .screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .seats span{ margin: 10px; padding: 10px; color: white; border: 4px solid #000; width: 120px; display: inline-block; background-color: #48C9B0; } .left{ text-align: left; } .right{ text-align: right; } .center{ text-align: center; } .seats{ text-align: center; } </style></head> <body> <div class="screen">Màn hình</div> <div class="seats"> <span class="left">Adam</span> <span class="center">Martha</span> <span class="right">Samantha</span> </div> </body> </html>
Kết quả
Ví dụ căn chỉnh dọc:
Ví dụ
<!DOCTYPE html> <html> <head> <title>CSS Text Alignment</title> <style> .screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .seats span:not(.withPadding){ margin: 10px; padding: 10px; color: white; border: 4px solid #000; } .seats span:not(.vertical){ height: 40px; display: inline-block; background-color: #48C9B0; } .withPadding{ padding: 20px 20px 0px; height: 20px; color: white; border: 4px solid #000; } .vertical{ display: inline-table; background-color: #48C9B0; height: 40px; } .verticalText { display: table-cell; vertical-align: middle; } .withLineHeight{ line-height: 40px; } .seats{ text-align: center; } </style></head> <body> <div class="screen">Màn hình</div> <div class="seats"> <span class="withPadding">Adam</span> <span class="withLineHeight">Martha</span> <span class="vertical"><p class="verticalText">Samantha</p></span> </body> </html>
Kết quả
