使用placeholder内容居中光标也居中了-慕课网

首页课程实战体系课手记专栏慕课教程

使用placeholder内容居中光标也居中了

来源：4-1 编程挑战

暮女神

2017-07-02 19:29

我在输入框的样式中加了text-align:center使palceholder的内容居中,可是点击输入框的时候光标也居中了,有让光标居左的办法吗?

写回答关注

3回答

么我的北海: 2017-07-04 10:07:16

已采纳

.test-input{
    width:150px;
    }
.test-input::-webkit-input-placeholder {
   padding-left:30px;
    }

暮女神

2017-07-03 20:49:24

你没弄懂我的意思,我是说让提示文字居中,点击后光标居左,提示文字还是居中

0 0
么我的北海

2017-07-03 17:41:52
第一种方法：
设定获得焦点后的样式；
```
.test-input{
    width:150px;
    text-align: center;
}
.test-input:focus{
    text-align: left;
}
```
第二种方法：
利用padding 使文字居中；
```
  .test-input{
        width:70px;
        padding: 0 40px;
    }
```
1 0

暮女神

你没弄懂我的意思,我是说让提示文字居中,点击后光标居左,提示文字还是居中

2017-07-03 20:49:58

共 1 条回复 >

CSS Sprite雪碧图应用

必学的大型网站实用技术，让你快速掌握CSS Sprite雪碧图技术

47101 学习 · 228 问题

相似问题

placeholder居中问题

回答 6

h3怎么没有居中呢

回答 1

怎样让文字居中显示

回答 3

这题里面文字居中怎么设置？能用margin 0 auto吗？

回答 6

文字居中对h3设置margin 0 auto没效果

回答 1

打开慕课网App查看更多内容