如何在 input=“text” 表單中垂直對齊這個占位符？

Question

所以我試圖讓這個看起來不錯，但我做不到。 問題是我無法垂直對齊文本。 如果有人可以幫助我，我將不勝感激。

這是 css：

#search-bar {
    margin-top: -3%;
    margin-left: 30%;
    width: 40%;
    padding-top: 2%;
    border: 2px solid whitesmoke;
    border-radius: 25px;
}

Answer 1

默認情況下，輸入中的文本垂直居中。

padding-top: 2%;

導致它被推到底部。

對於修復，我建議使用高度或將 padding-bottom 設置為 2%

Answer 2

很難說不提供任何 html 或 css，但看起來您可能會在不更改line-height屬性的情況下強制輸入height 。

Answer 3

我猜你想創建自定義輸入。
我的建議是你可以通過編寫這樣的代碼來實現它

 #search-bar { padding: 10px 20px; border-radius: 20px; border: none; } body { background: #292929; }

 <input id="search-bar" placeholder="Some text.." />

您還可以使用::placeholder設置占位符樣式

 #search-bar { padding: 10px 20px; border-radius: 20px; border: none; } #search-bar::placeholder { color: red; letter-spacing: 4px; } body { background: #292929; }

 <input id="search-bar" placeholder="Some text.." />

編輯

我也想向您推薦一些 flexbox。
請看一下這段代碼。 我們可以使用display: flex輕松地將子元素居中在父元素中，並使用justify-content ， align-items

 .parent { border: 1px solid black; width: 200px; height: 200px; display: flex; justify-content: center; /* this is for horizontal alignment */ align-items: center; /* this is for vertical alignment */ }.child { background: lightskyblue; width: 50px; height: 50px; }

 <div class="parent"> <div class="child"></div> </div>