The problem of centering the text in the input box

Code first: 

<input type="text" placeholder=""/>
input{
                font-size: 25px;
                font-weight: 600;
                color: -sharp666666;
                height: 30px;
                line-height: 30px;
            }
            input::-webkit-input-placeholder{
                color: -sharp999;
                font-size: 12px;
                line-height: 20px;
                padding-bottom: 10px;
            }

effect is shown in figure

clipboard.png
I believe you already know what I mean-how to center the placeholder= "test" text vertically? I tried every method I could think of, but it didn"t work. I finally gave up and wrote a pseudo input box

.
Html css
Mar.02,2021

remove the line-height attribute from input::-webkit-input-placeholder

< H2 > add < / H2 >

it seems impossible to try it in person. If you try it in another way, you can use positoon

. 
input::-webkit-input-placeholder{
  position:relative;
  top:xx px;
}

just let the height in the Input box be the same as the row height 

input{
height: 30px;
line-height: 30px;
}


< html >

< head > 

<meta charset="utf-8">
<title></title>

< / head >
< style > 

input {
    width: 200px;
    height: 30px;
    font: 14px/1 "microsoft yahei";
    color: -sharp333;
}

input::-ms-input-placeholder {
    text-align: center;
}

input::-webkit-input-placeholder {
    text-align: center;
}

< / style >

< body > 

<input placeholder="" /> </body>

< / html >

Previous: How can js's if.elseif be written in ternary expressions?

Next: About the cookice in the cross-domain fetching of iframe

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu