CSS中文本框居中顯示是常見的問題,下面介紹幾種實現方法:
1. 使用margin屬性實現 input { margin: 0 auto; display: block; } 該方法需要設置input的display為block,且在外部容器中父元素具有固定寬度。 2. 使用flex layout實現 .container { display: flex; justify-content: center; align-items: center; } 該方法使用flex布局,容器的justify-content和align-items分別控制水平和垂直方向的內容對齊方式。 3. 使用text-align屬性實現 .container { text-align: center; } .container input { display: inline-block; } 該方法使用text-align屬性居中容器內容,但需要將input的display設置為inline-block以避免塊級元素出現換行的問題。 4. 使用absolute position實現 .container { position: relative; } .container input { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 該方法使用絕對定位,將input相對于容器左上角偏移50%,然后使用transform屬性進行微調。 以上四種方法可以根據具體需求選擇,實現中文本框在頁面中的居中顯示。注意:以上示例代碼僅供參考,具體實現需要根據具體情況進行調整。
上一篇css 文本框 文字顏色
下一篇css 文本框限制字數