Question

占位符文本在safari浏览器中左对齐。它在所有其他浏览器中运行良好。

HTML：

<input type="text" class="form-input" placeholder="Email Address" />

CSS：

.form-input {
    width: 235px;
    height: 15px;    
    border: solid 5px #fff;
    text-align: center;
    padding: 10px 0px 10px 0px; 
    font-family: 'Helvetica-Bold';
}

请参阅fiddle

中的演示

我想将placeholder与input框的中心对齐。怎么做？

Answer 1

试试这个工作

CODE：

input { 
   text-align:center;
}

::-webkit-input-placeholder {
   text-align:center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align:center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align:center;  
}

:-ms-input-placeholder {  
   text-align:center; 
}

将在safari 6中作为占位符text-align属性在safari 5.1或更早版本

中不起作用

请参阅此处的支持表http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

Answer 2

更简洁的替代和跨浏览器方式（包括更旧的浏览器），使用：text-indent: Xpx;。

然后在text-indent上将input:focus重置为0，以获取实际文字。

占位符始终在safari中左对齐

2 个答案: