Làm cách nào để căn giữa văn bản trong hộp nhập liệu có nhãn?

Question

Âm thanh dễ dàng nhưng nói rằng tôi đang sử dụng bootstrap và hộp nhập liệu có nhãn, khi tôi đổi kích thước, văn bản bên dưới không được căn giữa.

Dưới đây là một số html đơn giản để demo:

<form action="http://google.com"> 
     <div> 
      <label for="inputBox">Email address</label> 
      <input name="email" type="text" id="inputBox"/> 
      <br> 
      (Center under input) 
     </div> 
    </form> 

Nhãn nên được kết hợp với hộp văn bản đầu vào, các văn bản '(Trung tâm dưới đầu vào) sẽ xuất hiện dưới hộp đầu vào ở giữa.

Vì vậy, lý tưởng nhất là văn bản (Trung tâm dưới đầu vào) nên được dán ở giữa bên dưới hộp văn bản đầu vào trong khi nhãn hoạt động bình thường.

Điều này có khả thi không? Tôi đang cố gắng với một bảng (của tất cả mọi thứ) tại thời điểm này nhưng không thể làm cho nó hoạt động, tôi đã cố gắng định vị vv vẫn không có may mắn.

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Nếu bạn muốn căn giữa mọi thứ liên quan đến nhau, thì thông thường chúng phải được đặt trong một thùng chứa.

div, 
 
label { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
div { 
 
    text-align: center; 
 
}

<form action="http://google.com"> 
 
    <div> 
 
    <label for="inputBox">Email address</label> 
 

 
    <div> 
 
     <input name="email" type="text" id="inputBox" /> 
 
     <br>(Center under input) 
 
    </div> 
 
    </div> 
 
</form>

nội dung ví dụ của bạn là quá trừu tượng để nói, nhưng nội dung trọng tâm của bạn có lẽ nên được một yếu tố nhãn nếu nó được kết hợp với đầu vào.

Answer 2

Bạn có thể giết chết 2 con chim với một đá - có một đầu vào tiếp cận đó là tương thích với trình đọc màn hình, và trung tâm văn bản của bạn, sử dụng cấu trúc ngữ đánh dấu này:

label { 
 
    max-width:300px; 
 
    display:block; 
 
} 
 

 
label span { 
 
    text-align:left; 
 
    display:block; 
 
} 
 
label input { 
 
    width:100%; 
 
}

<form action="http://google.com"> 
 
    <label> 
 
     <span>Email address</span> 
 
     <input name="email" type="text" id="inputBox"/> 
 
     <span style="text-align:center">center me</span> 
 
    </label> 
 
</form>

Chú ý bạn don không cần thuộc tính for. Đó là một cách rõ ràng để thực hiện khả năng truy cập. Một số CSS đơn giản căn chỉnh văn bản. Nếu bạn không muốn sử dụng kiểu nội tuyến, bạn luôn có thể viết một lớp khác.