直接给input或者textarea的样式加texta-align:center;

<input type="" name="" id="" value="" placeholder="信息" />

    ::-webkit-input-placeholder {
color: #f00;
text-align:center;
}

如果想要让提示文字距离边框有一定的距离,将text-align:center;去掉,加padding-left就可以

下面是兼容性写法

 /* WebKit browsers */

::-webkit-input-placeholder {
padding-left: 50px;
color: #777;
}
/* Mozilla Firefox 4 to 18 */ :-moz-placeholder {
color: #777;
opacity: 1;
}
/* Mozilla Firefox 19+ */ ::-moz-placeholder {
color: #777;
opacity: 1;
}
/* Internet Explorer 10+ */ :-ms-input-placeholder {
color: #777;
}

Internet Explorer 10、Firefox、Opera、Chrome 以及 Safari 支持 placeholder 属性。

注释:Internet Explorer 9 以及更早的版本不支持 placeholder 属性。

让placeholder中的默认文字居中,或者缩进多少像素的更多相关文章

  1. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  2. 关于placeholder中 文字添加换行 用转义字符&#13;&#10;代替<br>

    今天遇到一个问题 UI给的效果图中 文本域的提示文字 是两行显示, 于是就想到placeholder中能否解析html标签, 尝试后发现并无卵用, 经过调查后发现 可以用转义字符代替<br> ...

  3. 让Spinner中的文字居中

    如果套用simple_spinner_item或是simple_spinner_dropdown_item,然后直接在Spinner中用 android:gravity="center&qu ...

  4. [Android]Android 布局中如何让图片和文字居中显示?

    图片文字居中显示 **①组件TextView的属性 drawableTop ``` <LinearLayout android:layout_width="match_parent&q ...

  5. 利用VBA宏批量解决Word中图片大小、居中设置

    需求:经常阅读网上的研报(没钱买排版漂亮的高质量研报),有些需要保存的复制下来到word里,图片很大都超出word的边界了,也没有居中,手工一张张调整不现实,上百页的研报,几十张图片. 解决方案:利用 ...

  6. Android ToolBar标题文字居中的方法

    在项目的开发中,使用苹果手机的产品,出的界面效果图极有可能(我这里是一定)完全是按照苹果的界面风格来出的,例如界面顶部的title文字位置是水平居中 如图: 那么问题来了,当我们使用ToolBar控件 ...

  7. event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化

    前言: 项目中用到了一个功能,搜索框里有默认的文字,当搜索框获得焦点时里面的默认文字消失,如果失去焦点时搜索框内容为空则让里面的内容回复默认!,. 实现: 很轻松的在网上找到了类似代码 $(" ...

  8. Android TextView 文字居中

    有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity( ...

  9. 设置TextView文字居中

    有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity( ...

随机推荐

  1. ThinkPHP5 (路径优化,路由)

    路径:www.tp5.comm/index.php/index/index/index 站点路径/入口文件/模块/控制器/方法 一.绑定模块 public下的php文件,如index.php,内部写 ...

  2. BZOJ2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理)

    2440: [中山市选2011]完全平方数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 4920  Solved: 2389[Submit][Sta ...

  3. 编码介绍(ANSI、GBK、GB2312、UTF-8、GB18030和 UNICODE)

    转载:http://blog.jobbole.com/30526/(前面内容)和http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf ...

  4. Date.getTime() 结果为 NaN

    yyyy-MM-dd 格式的时间,部分浏览器环境下转换为 Date 对象后调用 getTime() 方法的结果为 NaN. 需要将 - 替换为 / var dateStr = '2019-01-01' ...

  5. Linux 环境中从源代码编译安装 ReText 问题与解决

    从源代码编译安装 ReText 问题与解决 1. 如何安装 Python Markups 1.1 从 https://launchpad.net/python-markups 下载 Python Ma ...

  6. js正则表达式注册页面表单验证

    可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  7. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  8. 2019-03-28 SQL Server Pivot

    --现在我们是用PIVOT函数将列[WEEK]的行值转换为列,并使用聚合函数Count(TotalPrice)来统计每一个Week列在转换前有多少行数据,语句如下所示 select * from Sh ...

  9. Java 中关于default 访问权限的讨论

    Java中关于成员变量访问权限问题一般书中会给出如下表格: 简单地描述一下表中的内容:用private 修饰的成员变量只能在类内部访问:用default修饰的成员变量可以再内部访问,也可以被同个包(同 ...

  10. WampServer更改或重置数据库密码

    WampServer安装后密码是空的, 修改一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用WAMP的MySql控制台修改. 第一种: ①在phpMyAdmin界面中点击[用户],将 ...