Stack Overflow Asked by Joaquin on January 1, 2022
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;
}
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>
Answered by Thanyathon Pornsawatchai on January 1, 2022
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%
Answered by denniz crypto on January 1, 2022
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.
Answered by David Carignan on January 1, 2022
3 Asked on November 16, 2021
0 Asked on November 16, 2021 by machtyn
1 Asked on November 16, 2021
1 Asked on November 16, 2021 by captainmorgan
1 Asked on November 16, 2021 by peter-von-frosta
0 Asked on November 16, 2021 by loverszhaokai
1 Asked on November 16, 2021 by a_k
0 Asked on November 16, 2021 by winters
4 Asked on November 15, 2021 by tyler-p
2 Asked on November 15, 2021 by mxzero-mxzero
3 Asked on November 15, 2021 by programmer1
1 Asked on November 15, 2021
1 Asked on November 15, 2021
1 Asked on November 15, 2021
c compiler warnings enable shared from this libstdc virtual destructor
1 Asked on November 15, 2021 by user13443583
Get help from others!
Recent Answers
Recent Questions
© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir