如何在 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

如果不提供任何 html 或 css 很难说，但看起来您可能会在不更改 line-height 属性.

Answer 2

默认情况下，输入中的文本垂直居中。

padding-top: 2%;

导致它被推到底部。

对于修复，我建议使用高度或将 padding-bottom 设置为 2%

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.." />

EDIT

我也想向您推荐一些 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>

如何在 input="text" 表单中垂直对齐此占位符？

How can I vertically align this placeholder inside an input="text" form?

html

css

placeholder