Căn giữa Form trong CSS • Kiến càng

Mấy hôm trước khi tôi viết bài về căn giữa văn bản trong CSS, định tích hợp luôn phần này vào, vì input và button thường cũng gồm văn bản luôn, không hiếm trường hợp phải căn giữa, đặc biệt trên các giao diện dành riêng cho tìm kiếm, hoặc search bar chiếm vị trí quan trọng trên website.

Tuy nhiên nghĩ lại thì tách ra hợp lý hơn, điều đầu tiên là vì form dù bao gồm chữ, nhưng nó khác nhiều các thẻ bao chữ khác như a, p, h, ul li, ol li. Cụ thể form có nhiều thành phần hơn, bản thân nó là một, và thường là hai thành phần khác nữa nằm bên trong là input nhập liệu đầu vào và nút bấm để chuyển sang phần kết quả tìm kiếm.

Dưới đây là một mẫu form cơ bản, đơn giản, chưa đưa ra bất cứ chỉ thị CSS nào, ngoại trừ box div bao bên ngoài- không phải là thành phần thuộc về form:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
         div#bigBox {width:800px; 
                     height:300px; 
                     border:1px solid black; }
        </style>    
    </head>
    <body>
        <div id="bigBox">
            <form id="seForm" action="">        
              <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
              <input type="submit" value="Tìm kiếm" id="seButton">
            </form> 
        </div>
    </body>
</html>

Kết quả: form cư xử như văn bản thuần, bám vào bên trái trên cùng và không có lề, đệm. Các thành phần của form có thuộc tính display như inline hoặc inline-block vậy, nó xếp trên cùng dòng. Kiểm tra lại thì mọi người nói rằng đa số trình duyệt xem input, button là inline-block còn form thì là block. Ví dụ 2 form dưới đây không còn xếp cùng dòng nữa:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black;}
        </style>    
    </head>
    <body>
        <div id="bigBox">
           <form id="seForm" action="">        
             <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
             <input type="submit" value="Tìm kiếm" id="seButton">
           </form> 
            
           <form id="seForm2" action="">        
              <input type="text" id="seInput2" placeholder="Mời bạn nhập vào 2">
              <input type="submit" value="Tìm kiếm 2" id="seButton2">
           </form> 
        </div>
    </body>
</html>

Khi tôi thử thiết lập viền, width cho form để nó dễ nhìn hơn, kết quả là nếu form đủ rộng, nó sẽ vẫn để input, button cùng dòng, nếu thu hẹp lại, nó sẽ tự động xuống dòng, giữa input, button và form cũng không hề có lề:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black;}
            #seForm, #seForm2 {border: 1px solid black; margin-top:10px; width:300px;}
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                   <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                   <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
            
             <form id="seForm2" action="">        
                   <input type="text" id="seInput2" placeholder="Mời bạn nhập vào 2">
                   <input type="submit" value="Tìm kiếm 2" id="seButton2">
             </form> 
        </div>
    </body>
</html>

Bắt đầu thực hiện căn giữa form

Tôi tạm thời xóa cái form thứ hai đi, để lại một form cho dễ quan sát.

a. Nếu form chưa thiết lập chiều rộng, câu lệnh text-align: center của thẻ cha sẽ giúp form căn giữa trong box bao bên ngoài (thẻ div), còn form lấy độ rộng luôn của box. Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; text-align:center; }
            #seForm {border: 1px solid black; margin-top:10px;}
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

b. Nếu form có độ rộng cụ thể, thì câu lệnh trên sẽ căn giữa input, button trong chính form chứ không phải so với div nữa, ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; text-align:center; }
            #seForm {border: 1px solid black; margin-top:10px; width:300px;}
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

c. Bỏ text-align của div đi, và chuyển lệnh này xuống chính form thì kết quả cũng tương tự, ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; }
            #seForm {border: 1px solid black; margin-top:10px; width:300px; text-align:center;  }
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

d. Để vừa căn giữa các thành phần trong form (input, button), vừa căn giữa bản thân form, chúng ta cần bổ sung thêm lệnh margin: 0 auto vào CSS của thẻ form, ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; }
            #seForm {border: 1px solid black; margin-top:10px; width:300px;text-align:center; margin: 0 auto;}
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

e. Giờ làm thế nào để nút tìm kiếm tụt xuống dòng, bạn có thể làm điều này dễ dàng bằng cách quy định chiều rộng cụ thể của form, input, và button (như đã nói), để việc xếp cùng dòng sẽ không thể thực hiện được. Câu lệnh ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; }
            #seForm {border: 1px solid black; margin-top:10px; width:300px; text-align:center; margin: 0 auto;}
            #seInput {width:270px; }
            #seButton {width:100px; }
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

f. Nếu bạn muốn ngay cả khi form có kích cỡ đủ để input và button nhảy lên cùng dòng nhưng vẫn xếp khác dòng thì cần chuyển display của input về dạng block và thêm margin: 0 auto cho chính nó để nó tự căn giữa trong form. Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; }
            #seForm {border: 1px solid black; margin-top:10px; width:450px; text-align:center; margin: 0 auto;}
            #seInput {display:block; margin: 0 auto; width:200px;}
            #seButton {width:100px; }
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

Chỉ thị CSS trên khá hay vì nó có nhiều lớp:

margin: 0 auto trong seForm giúp nó căn giữa chính bản thân nó so với box div bao bên ngoài;
text-align: center trong seFrom giúp nó căn giữa được button (display mặc định là inline-block) so với chính nó;
display:block; margin: 0 auto; trong seInput giúp nó căn giữa chính nó trong seForm và ngắt dòng so với button;

g. Để tạo lề giữa button và input, chúng ta chỉ cần bổ sung câu lệnh margin-top trong seButton, vì button là inline-block nên việc thiết lập margin, padding thực hiện được. Câu lệnh ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>căn giữa form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div#bigBox {width:800px; height:300px; border:1px solid black; }
            #seForm {border: 1px solid black; margin-top:10px; width:450px; text-align:center; margin: 0 auto;}
            #seInput {display:block; margin: 0 auto; width:200px;}
            #seButton {width:100px; margin-top:20px;}
        </style>    
    </head>
    <body>
        <div id="bigBox">
             <form id="seForm" action="">        
                  <input type="text" id="seInput" placeholder="Mời bạn nhập vào">
                  <input type="submit" value="Tìm kiếm" id="seButton">
             </form> 
        </div>
    </body>
</html>

Tổng kết

Căn giữa form không phức tạp khi chúng ta nắm rõ trạng thái display mặc định của từng thành phần. Form là block, còn input và button là inline block;

Sử dụng margin: 0 auto để tự căn giữa một thành phần block so với thẻ bao ngoài nó, cái này thì đúng phổ quát chứ không riêng gì form.

Sử dụng text-align: center để căn giữa thành phần inline-block nằm trong một thẻ.

Linh hoạt chuyển đổi trạng thái display để ngắt dòng hoặc/và căn giữa khi cần thiết.

Thiết lập độ rộng của form giúp ích cho việc ngắt dòng khi cần.

Bắt đầu thực hiện căn giữa form

Tổng kết

Nguyễn Đức Anh

Bài viết liên quan: