CSS 輸入框上下居中對(duì)齊

在網(wǎng)頁設(shè)計(jì)中，表單是很重要的一部分，而輸入框是表單中最常用的元素之一。如果輸入框沒有居中對(duì)齊，會(huì)影響頁面的美觀性和用戶體驗(yàn)。那么如何實(shí)現(xiàn)輸入框的上下居中對(duì)齊呢？下面我們來介紹一下具體的做法。

首先，我們需要設(shè)置輸入框的高度和 line-height 屬性相等。這樣可以讓輸入框的文本在垂直方向居中對(duì)齊。

其次，我們使用 box-sizing 屬性將元素的盒子模型設(shè)為 border-box。這樣可以讓輸入框的高度和寬度包括邊框在內(nèi)。同時(shí)，我們給輸入框添加上、下內(nèi)邊距（padding）來增加元素的高度。這樣可以讓輸入框的高度和 line-height 屬性相等。

input {
height: 40px;
line-height: 40px;
padding: 10px 15px;
box-sizing: border-box;
border: 1px solid #ccc;
}

以上樣式設(shè)置完成后，我們會(huì)發(fā)現(xiàn)輸入框已經(jīng)顯示為居中對(duì)齊了。如果要想調(diào)整輸入框的位置，可以先將輸入框放置到一個(gè)包裹元素中，通過包裹元素的 position 屬性來實(shí)現(xiàn)居中對(duì)齊。

<div style="position: relative; top: 50%; transform: translateY(-50%);">
<input type="text" name="inputName" id="inputName" />
</div>

使用包裹元素，我們可以通過設(shè)置元素的位置來實(shí)現(xiàn)輸入框的上下居中對(duì)齊。使用 transform 屬性的 translateY 函數(shù)可以將包裹元素上移一定的距離，使其和父元素的中心點(diǎn)重合。

通過以上的 CSS 設(shè)置，我們可以輕松地實(shí)現(xiàn)輸入框的上下居中對(duì)齊。這樣可以讓我們的表單更加美觀，提升用戶的使用體驗(yàn)。