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!

Related Questions

Which is better: O(nm) or O(n log n)?

id not assigned in contact list

Text field problems Xcode

Problem with per-triangle collision detection when geometry is rotated

Need to put a Hyperlink in the Google Script , but it shows error Unexpected Identifier where tag is used

Javascript map inside of map till condition satisfied

How to extract the extract specific key from an dictionaries?

Python – How do you restart a for loop?

Scrapy Last Page is not null and after page 146 last page is showing again

One by one making a histogram out each column of a dataframe

Setdiff within mutate function

Attempting to import from a XPath, seems to always yield blank information

I’d like to have a slightly altered behavior for lodash’s throttle function

how to create a 2D vector: first row of string and second row is integer

Image segmentation of flora in the wild

I’m trying to graph a function for different values of Chi and Wn?

How to share state between users in ReactJS

Solution to Python3/tkinter import error “Symbol not found: __cg_jpeg_resync_to_restart”

Center a circle in other device

Function not returning in multiprocess, no errors

Ask a Question