input的placeholder不垂直居中问题

最新推荐文章于 2024-04-16 17:05:02 发布
最新推荐文章于 2024-04-16 17:05:02 发布
阅读量781 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46390400/article/details/108972720
版权

在这里插入图片描述将input的line-height设置为：

line-height:normal;
小静是菜鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用input文本框内容自动垂直居中并默认提示文字单击为空
12-08
三个功能： 1、内容自动垂直居中 2、默认提示文字显示灰色 3、单击后变为空 复制代码代码如下: <input type=”text” name=”wd1″ id=”qy_1″ maxlength=”100″ style=”color:gray;width:199px;height:30px;line-height:30px;” autocomplete=”off” value=”请输入企业名称” style=”color:gray;” onfocus=”[removed]if(this.value == ‘请输入企业名称’) this.value = ”; this.style.co
Safari中input的placeholder垂直问题
樱桃小丸子の樱花
07-19 1428
测试中Safari的input文本框有placeholder值时，line-height并不能使提示文本垂直居中： height:40px; line-height:40px; 解决方法： 方法一：    使用padding使提示文字居中，如下： height: 40px; padding: 13px 0; 方法二：   使用line-height: 1px; height: 4...
android怎么垂直居中且靠右,placeholder 靠右垂直居中/位置兼容
weixin_42650811的博客
05-27 1243
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;}浏览器...
【微信小程序】文字水平垂直居中对齐问题（完美解决方案）
qq_45587822的博客
03-06 3859
我们知道常用的居中对齐方式有很多种例如： text-align:center; align-items:center; justify-content: center; margin: auto; #子容器在父容器中居中 但是在view中的文字对齐却不能简单的使用text-align: center;来实现，这种办法只能实现文字的水平居中， 要实现水平垂直居中 可使用如下方案 .td {...
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使提示文字居中，
小程序input的placeholder不垂直居中的问题解决
qq_43437571的博客
08-26 2286
placeholder不垂直居中
输入框设置placeholder的文字居中
weixin_43167662的博客
06-29 1452
input class='login-form-pwd' placeholder='请输入商家登录密码' placeholder-class="center"></input>
解决input的placeholder不垂直居中问题
qq_38136543的博客
09-09 4198
解决input的placeholder不垂直居中 将input的line-height改为normal line-height:normal
移动端开发遇到的坑之input里的placeholder不垂直居中的问题
u010007013的博客
05-30 8502
今天发现input输入框里的placeholder 在ios设备上不垂直居中。 一开始我设置了input::-webkit-input-placeholder里的line-height等于height： input::-webkit-input-placeholder { height 42px line-height 42px } 经过查询资料得知，input输入框的line-...
input中的placeholder不能垂直居中的情况
奥里给小饼干
04-30 1175
写移动端页面的时候，顶部的input输入框中的placeholder文字在设置了文字大小之后，不能垂直居中的问题（设置行高无效）在input中设置了。
jquery 代码解决placeholder不换行，不居中问题
12-30
jquery 代码解决placeholder不换行，不居中问题
HTML5 input placeholder 颜色修改示例
01-21
Chrome支持input=[type=text]占位文本属性，但下列CSS样式却不起作用： CSS 复制代码代码如下: input[placeholder], [placeholder], *[placeholder] { color:red !important; } HTML input语句 复制代码代码如下...
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
10-26
本篇文章主要介绍了使用jQuery快速解决input中placeholder值在ie中无法支持的问题。需要的朋友可以过来参考下，希望对大家有所帮助
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦的编程日常
04-16 1287
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
TailwindCss在vue3项目中的使用
最新发布
单飞吧的博客
04-16 182
如果你介意 tailwind.config.js 的文件是 js，那么直接改为 ts 之后换成以下代码。注意postcss.config.js 不能改成 ts。4 在src 目录下创建目录styles，并在该目录下创建Tailwind.css，用 @tailwind 指令添加 Tailwind功能。3 在tailwind.config.js添加对vue文件的识别，其他配置可以在。6 在main.ts 中引入Tailwind.css。1 安装 tailwindcss和postcss。
css设置文字撑满盒子
半兽先生的博客
04-12 272
【代码】css设置文字撑满盒子。
通过Transform与Animation，来探索CSS中的动态视觉效果
SailingCoder的博客
04-12 715
在transform和animation出现之前，前端开发者通常需要编写大量的 JavaScript 代码来实现动态效果。然而，这两个 CSS 属性的引入极大地简化了丰富动效和过渡效果的实现，从而让用户界面更加引人入胜，交互体验更为流畅。本文将深入探讨transform和animation这两个属性，并分析它们在创造动态视觉效果中的应用。下面我们通过Demo示例的方式，来见证下。
纯css实现左右拖拽改变盒子大小
weixin_45730243的博客
04-12 426
纯css实现拖拽改变盒子大小
【CSS面试题】Flex实现九宫格
weixin_63681863的博客
04-12 691
考察知识：flex布局 + 水平垂直居中的实现。
input placeholder垂直居中
06-28
### 回答1： 可以使用CSS的flex布局来实现input placeholder垂直居中。具体方法是给input元素的父元素设置display:flex和align-items:center属性。这样就可以让placeholder文字垂直居中显示了。 ### 回答2： 在前端开发中，input是表单中最常用的输入控件之一，而placeholder属性则提供了一种灵活的方式来提示用户输入内容的格式或要求。然而，很多人在使用placeholder属性时可能会遇到一个问题，就是如何使其垂直居中显示。下面我将就该问题提供一些解决方案。 1.使用CSS文本垂直对齐属性 可以使用CSS的垂直对齐属性来使placeholder垂直居中。 首先，需创建一个class属性，设置其包含text-align和line-height属性的CSS样式： .placeholder-center { text-align: center; line-height: 30px; } 在HTML中，将这个class属性通过input标签应用于input元素就可以将placeholder属性居中： <input type="text" placeholder="请输入内容" class="placeholder-center"> 2.使用绝对定位 另一种方法是通过绝对定位来实现placeholder的垂直居中显示。 确定input元素在HTML中的位置后，需在CSS中通过定位属性对其进行定位，然后将其子元素即placeholder元素绝对定位居中即可。 在CSS中，将input元素设置为相对定位(position: relative)，然后将子元素placeholder设置为绝对定位(position: absolute)。 再通过top和left属性对placeholder进行偏移，并设置margin自动计算它与其容器之间的空间: input { position: relative; } input::-webkit-input-placeholder { position: absolute; top: 50%; left: 0; right: 0; margin: -10px auto 0; } 在上述代码中，假设input元素高度为20px，由于placeholder的高度通常为输入框高度的一半，因此top属性的初始值为50%即可。 以上两种方法均可使placeholder垂直居中，选择哪种方法可以根据实际情况灵活选择，建议开发者在实际项目中选择相应的方法根据具体情况进行应用。 ### 回答3： 在页面设计中，input placeholder是一个常用的元素，可以为用户提供输入提示，使得用户能够更快速地准确输入内容。然而，在页面中，我们可能会遇到一些问题，就是input placeholder没有居中显示，或者大小不适配等等。 要解决input placeholder垂直居中的问题，我们需要用到CSS的一些样式，具体如下： 1. 设置input元素的高度和line-height相等。通过设置input元素的高度和行高相等，可以保证输入框中的文字和输入框的高度相等，从而保证输入框中的内容在竖直方向居中。 示例代码： ``` .input{ height: 30px; line-height: 30px; } ``` 2. 设置placeholder的样式，将文字设置为灰色，并将位置设置为相对输入框的居中位置。 示例代码： ``` .input::-webkit-input-placeholder { /* Webkit browsers */ color: #999; position: relative; top: 50%; transform: translateY(-50%); } .input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; position: relative; top: 50%; transform: translateY(-50%); } .input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; position: relative; top: 50%; transform: translateY(-50%); } .input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; position: relative; top: 50%; transform: translateY(-50%); } ``` 通过设置以上的样式，我们就可以在页面中实现input placeholder垂直居中的效果了。同时，我们还可以通过设置其他样式，比如字体大小、颜色等等，来让输入框的样式更加美观和符合页面设计的要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值