直接给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. docker中出现容器未运行无法进入容器的操作

  2. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  3. ubuntu软件卸载方法

    一.查看软件包 1.查看已安装的软件包 dpkg --list 2.查看不知道要删除软件的具体名称 dpkg --get-selections | grep <软件相关名称> 二.卸载 1 ...

  4. ZYQAssetPickerController的使用,不错的图片选择

    import UIKit class ViewController: UIViewController,ZYQAssetPickerControllerDelegate,UIImagePickerCo ...

  5. Asp.net Web Api中使用配置Unity

    第一步:建立web api,添加unity.webapi. 第二步:在添加了该引用之后,在App_Start中会自动生成UnityConfig.cs文件 第三步:添加数据做测试 第四步:展示效果

  6. JEE Spring-boot 简单的ioc写法。

    什么是ioc,就是你可能会有一些生活必需品,这些东西你必须要用才能存活.但是你不是每天都回去买,去哪一家点去买.而这些用品会一直放在哪里,每一个商店就是一个容器,包裹着这些物品. 创建ioc项目,首先 ...

  7. CDR实例教程-高考789,敢拼就能赢!

    本教程是我去年做的一个案例,本来今年想要在做一个,突然意识到今天就是高考日了,没来的及,所以大家将就看些.7.8.9是值得一生纪念的日子,也是以后的每年都会怀念的日子,因为是全国都在上演史诗大剧“决战 ...

  8. Kattis - Babelfish

    Babelfish You have just moved from Waterloo to a big city. The people here speak an incomprehensible ...

  9. WiFi无线连接过程中有哪几个主要步骤?

    WiFi无线连接过程中有哪几个主要步骤?[1]在使用WIFI功能时,经常性的操作是打开手机上的WiFi设备,搜索到心目中的热点,输入密码,联网成功,成功上网.这个看似简单的过程,背后却是隐藏着大量的无 ...

  10. 【codeforces 501D】Misha and Permutations Summation

    [题目链接]:http://codeforces.com/problemset/problem/501/D [题意] 给你两个排列; 求出它们的字典序num1和num2; 然后让你求出第(num1+n ...