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

Question

So I am trying to make this look good, but I can't. The problem is that I can't vertically align the text. If someone can help me, I would be very grateful.
Here is the css:
#search-bar {
    margin-top: -3%;
    margin-left: 30%;
    width: 40%;
    padding-top: 2%;
    border: 2px solid whitesmoke;
    border-radius: 25px;
}

Thanyathon Pornsawatchai · Answer

I guess you want to create custom input.
And my suggestion is you can achieve it by writing code like this

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

body {
  background: #292929;
}

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

You can also style placeholder with ::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

And I would like to suggest you some flexbox too.
Please take a look at this code. We can center the child element in the parent easily with display: flex and use 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>

denniz crypto · Answer

by default text in a input in vertically centered.
padding-top: 2%;

is causing it to be pushed to the bottom.
for a fix i would recommend using a height or also setting padding-bottom to 2%

David Carignan · Answer

Hard to say without providing any html or css, but it looks like you might be forcing a height on your input without changing the line-height property.

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

3 Answers

Add your own answers!

Ask a Question