如何讓input的高度增加同時保持文字在底部？

讓文本在高input 框中底部對齊的技巧

網頁開發中，常常需要創建高度較大的輸入框(input)，並讓其中的文本位於底部，而非默認的垂直居中。本文介紹幾種實現此效果的方法。

問題：文本垂直居中

一個高度為60px 的input 框，其文本默認垂直居中顯示。我們需要將其調整到底部。

解決方案：利用CSS

無需使用padding，我們可以通過巧妙的CSS 佈局來實現。方法是隱藏input 的默認邊框，然後用一個帶有邊框的容器包裹input，並將其定位到容器底部。

步驟：

1. 隱藏input 默認邊框:使用border: none;去除input 的默認邊框。

2. 創建帶邊框的容器:創建一個div容器，設置其高度和邊框樣式。

3. 將input 定位到容器底部:使用position: absolute;和bottom: 0;將input 絕對定位到容器底部。

代碼示例：

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
  height: 60px;
  border: 1px solid #ccc;
  position: relative; /* 关键：使绝对定位的子元素相对于此容器定位 */
}
input {
  height: 100%;
  border: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}
</style>


  <div class="container">
    <input type="text" placeholder="请输入文本">
  </div>

通過以上方法，即使input 高度增加，文本也會始終保持在底部。 box-sizing: border-box;確保了input 的高度計算包含了邊框和內邊距，避免了高度計算上的偏差。

以上是如何讓input的高度增加同時保持文字在底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！