直接给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. mybatis、spring、mysql、maven实现简单增删查改

    之前写过的mybatis博客作为学习mybatis.spring还是不太合适. 现在找到一个不错的例子,首先将这个完整的mybatis增删查改例子在本地上实现出来,然后再进行学习. 项目结构与运行结果 ...

  2. MySQL(十一)

    1.1 约束条件 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性 主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIG ...

  3. 使用 Travis-CI 的五个理由

    I use the service of travis-ci now for a year. In that time the continuous integration has often poi ...

  4. CheckBox的Attributes

    在看老同事写的代码的时候,发现了这样的一段代码:之前自己没有遇到过,记录下吧. 大致是这样的 foreach (GridViewRow grv in GridView1.Rows) { CheckBo ...

  5. struct和class两个关键字的区别

    1. <C++ Primer> 用class和struct关键字定义类的唯一差别在于默认访问级别:默认情况下,struct的成员为public,而class的成员为private. 2. ...

  6. Java用freemarker导出Word 文档

    1.用Microsoft Office Word打开word原件: 2.把需要动态修改的内容替换成***,如果有图片,尽量选择较小的图片几十K左右,并调整好位置: 3.另存为,选择保存类型Word 2 ...

  7. 路飞学城Python-Day19(Py_Notes)

    # 先定义类 class LuffyStudent: school = 'luffy' def learn(self): print('学习使我快乐') def eat(self): print('吃 ...

  8. Java基础之Colloction

    0 引言 以下是介绍Java有关集合类,以及对应每个类的用途,同时进行比较集合类的不同特点来让我们深入了解. 1 Collction接口 Collection是最基本的集合接口,一个Collectio ...

  9. echart纵坐标标签特别长换行显示

    纵坐标 yAxis : [ { type : 'category', data : name, axisLabel: { //坐标轴刻度标签的相关设置. textStyle: { color: '#0 ...

  10. 2017CCPC秦皇岛

    热身赛 B题 Smartphone: 大整数相乘 Time Limit: 1 Second Memory Limit: 65536 KBHelianthuswolf Co. Ltd. is a mul ...