解决：ios下input的placeholder不垂直居中显示的问题

最新推荐文章于 2025-02-13 13:45:24 发布

原创最新推荐文章于 2025-02-13 13:45:24 发布 · 5.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#input #ios #placeholder

收录于

css 专栏收录该内容

2 篇文章

订阅专栏

本文解决iOS设备上input元素placeholder文字垂直显示不居中的问题。通过将line-height设置为normal并微调padding-top属性，使文字在输入框中完美居中。

在ios 下input的placeholder没有垂直显示的原因是因为你使用了line-height这个属性，只要把line-height设置为normal 就可以，若还是有点偏上，可以手动用padding 来调一下,如下：

input::-webkit-input-placeholder{
            padding-top: 2px;
            line-height: normal ;
    }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

去吧，皮卡丘

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react-native Text 文字垂直居中

hzxOnlineOk的博客

08-07

3517

import {Platform} from 'react-native'; label: { fontSize: OASize(11), color: OAColor.descText, height: OASize(20), textAlign: 'center', textAlignVertical: 'center', ...Platform.select({ ios: { lineHeight: OASize(20) }, .

1 条评论您还未登录，请先登录后发表或查看评论

小程序input的placeholder不垂直居中的问题解决

qq_43437571的博客

08-26

4658

placeholder不垂直居中

placeholder文字居中

qq_36349264的博客

05-17

3965

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

输入框设置placeholder的文字居中

weixin_43167662的博客

06-29

2206

input class='login-form-pwd' placeholder='请输入商家登录密码' placeholder-class="center"></input>

IOS下input的placeholder不垂直居中的问题

weixin_44994372的博客

10-25

1853

input的placeholder不垂直居中，input设置高度后，使用line-height只能使输入的文字垂直居中，但是placeholder不会居中，反而会偏上。就不上图了，遇到的小伙伴会知道啥意思的，直接上解决方法的代码 input::placeholder fz(14) font-family PingFangSC-Semibold font-weight:600;...

移动端开发遇到的坑之input里的placeholder不垂直居中的问题

u010007013的博客

05-30

8668

今天发现input输入框里的placeholder 在ios设备上不垂直居中。一开始我设置了input::-webkit-input-placeholder里的line-height等于height： input::-webkit-input-placeholder { height 42px line-height 42px } 经过查询资料得知，input输入框的line-...

解决：input输入框里的placeholder 在ios设备上不垂直居中

小豆花儿的学习之路

08-28

1741

input输入框里的placeholder 在ios设备上不垂直居中 解决： input{ line-height:normal }

element ui 移动端IOS设备input框光标不垂直居中问题处理

m0_52459016的博客

03-20

546

说明：在移动端开发时发现ios设备光标偏上，不垂直居中，经过测试设置 line-height:normal;没有效果，经过研究测试发下使用以下代码可以将问题解决，亲测有效，特此记录。

在HTML和CSS中如何处理placeholder文字在文本框中居中的问题

qq_46040001的博客

01-07

695

placeholder文字居中问题

android怎么垂直居中且靠右,placeholder 靠右垂直居中/位置兼容

weixin_42650811的博客

05-27

1497

1.input输入框文字靠右垂直居中。2.placehoder提示同样靠右垂直居中。(placeholder是HTML5 input的新属性，英文意思是占位符，它一般表示input输入框的默认提示值。)css代码input {text-align: right;font-size:0.3rem;width:100%;height:0.78rem;line-height:0.78rem;}浏览器...

input中的placeholder不能垂直居中的情况

奥里给小饼干

04-30

2002

写移动端页面的时候，顶部的input输入框中的placeholder文字在设置了文字大小之后，不能垂直居中的问题（设置行高无效）在input中设置了。

input框的placeholder使用line-height在Safari上不垂直居中的问题

夏天的甲虫

07-29

1万+

测试中出现的问题，Safari5.1.7 input文本框有placeholder值时，css样式设置 line-heigh t与 heigh t等高，并不能使提示文本垂直居中，如下： width: 450px; height: 40px; line-height: 40px;解决方案一：使用padding使提示文字居中，

[css]placeholder在iOS下不垂直居中的解决方案

saeko49的博客

08-14

1057

设置placeholder样式需要针对不同浏览器分别写三条（写在一起不行） .wrapper input::-webkit-input-placeholder { color: #ff0000; } .wrapper input::-moz-placeholder { color: #ff0000; } .wrapper input:-ms-input-placeholder { color: #ff0000; } placeholder在iOS下存在bug，input:tex

解决input的placeholder不垂直居中问题

qq_38136543的博客

09-09

4989

解决input的placeholder不垂直居中 将input的line-height改为normal line-height:normal

关于uniapp input标签，placeholder显示不全的问题

热门推荐

xqq580231的博客

12-27

2万+

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

解决移动端input中placeholder无法垂直居中的问题

web_callBack的博客

12-27

9560

在项目中遇到在移动端中placeholder属性无法实现垂直居中的问题，解决方案如下：问题原因：input的placeholder属性由于对于各个浏览器的兼容性不同，在ios浏览器文字靠上，而在andrio浏览器中却文字靠下解决办法：可以使用span标签代替placeholder属性，结合js的方法模拟实现代码如下： HTML代码：咨询服务员后

placeholder在某些浏览器下不垂直居中问题（Safari）

JaneYork的博客

04-26

1518

贴图： input的提示语placeholder在Chrome正常，在Safari浏览器不垂直居中。解决方式一：将input的line-height设置为normal即可。解决方式二： padding 解决方式三： height: 40px; vertical-align: middle; ...

input输入框ios上光标与placeholder、value不能对齐居中

weixin_34247155的博客

04-07

1396

//1.input输入框ios上光标与placeholder、value不能对齐居中解决办法：(有网的情况下记得测试ios，测试光标、value和placeholder对齐居中) input：height与font-size相等； box-sizing:content-box; padding:（inpu...