Chúng ta có thể căn giữa theo chiều ngang một phần tử cấp khối (block-level) bằng thuộc tính margin trong CSS, nhưng thuộc tính width của phần tử đó phải được đặt.
Ví dụ căn giữa phần tử bằng CSS margin:
Ví dụ
<!DOCTYPE html> <html> <head> <title>Center Alignment using CSS Margin</title> <style> #yinyangSymbol { width: 100px; height: 50px; background: #fff; border-color: #000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yinyangSymbol::before { content: ""; position: absolute; top: 50%; left: 0; background: #fff; border: 18px solid #000; border-radius: 100%; width: 14px; height: 14px; } #yinyangSymbol::after { content: ""; position: absolute; top: 50%; left: 50%; background: #000; border: 18px solid #fff; border-radius:100%; width: 14px; height: 14px; } div{ width: 50%; margin: 10px auto; border:4px solid black; } #text { border: 4px solid black; background-color: grey; color: white; text-align: center; } </style> </head> <body> <div id="main"> <div> <div id="yinyangSymbol"></div> </div> <div id="text">Hãy ở giữa & Cân bằng</div> </div> </body> </html>
Kết quả
Đoạn mã trên sẽ tạo ra kết quả sau:
Ví dụ khác căn giữa phần tử bằng CSS margin:
Ví dụ
<!DOCTYPE html> <html> <head> <title>Center Alignment using CSS Margin</title> <style> .screen{ padding: 10px; margin: 10px auto; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .screen1 { background-color: #f06d06; width: 70%; } .screen2 { background-color: #48C9B0; width: 50%; } .screen3 { background-color: #DC3545; width: 30%; } </style> </head> <body> <div class="screen screen1">Màn hình 70%</div> <div class="screen screen2">Màn hình 50%</div> <div class="screen screen3">Màn hình 30%</div> </body> </html>
Kết quả
Đoạn mã trên sẽ tạo ra kết quả sau:
