围绕textarea的占位符文本在Safari(Centering textarea placeho

我想中心为我的占位符文本textarea秒。下面的代码在Chrome和IE罚款，但在Safari是左对齐：

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

:-moz-placeholder {
text-align:center;
}

我怎样才能得到它在Safari中心（最好只使用CSS）？

Answer 1:

我做了一个简单的解决方案，在Safari工作5+和所有其他的浏览器，你可以检查一下： http://jsfiddle.net/joaorito/RqUJL

HTML

<div class="center_area">
<ul class="V_align">
    <li class="V_cell">
        <div class="V_element">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
    </li>
</ul></div>

CSS

.center_area
  {
  font-size: 16px;
  width: 300px;
  height: 300px;
  border: 5px solid black;
  } 

.center_area ul
  {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: red;
  height: 100%;
  width: 100%;
  }

.center_area ul li
  {
  color: #FFF;
  font-size: 1.500em;
  line-height: 28px;
  }

.center_area  ul li div
  {
  background-color: green;
  padding: 10px;
  text-align: center;
  }

.center_area .V_align
  {
  display: table;
  overflow: hidden;
  }

.center_area .V_align .V_cell
  {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  }

.center_area .V_align .V_cell .V_element
  {
  display: block;
  }

Answer 2:

此问题是特定于Safari 5.0和Safari 5.1 + Win7 -只要别人做的测试都在关注。

安德鲁说，中号它的工作在Safari 6.0, 5.1和Firefox 11 -无论是在Windows （没有提到的版本，也许不是Win 7 ） -和Mac。

我只是测试下面的代码上Safari 6.0.2 ， Chrome 24.0.1 ， Firefox 18.0.1 ，并且可以确认它的工作。在不工作时Opera 12.10 。所有上测试OSX Lion 。 http://jsfiddle.net/dreamyguy/ZzdPH/

HTML

<input type="text" placeholder="Lorem ipsum" />

CSS

input { width: 200px; }
::-webkit-input-placeholder {
    text-align:center;
}
:-moz-placeholder {
    text-align:center;
}
:-ms-input-placeholder {
    text-align:center;
}

也许你应该修改这个问题，并使其具体到Safari浏览器5.0版及以下，因为它是一个Safari浏览器的具体问题，因为这个问题已被固定在以后的版本。

该参考可能是太有用： http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

Answer 3:

input[type=textarea] 
{
  line-height: 1;
}

Answer 4:

我碰到这个问题，即在我只好中心对齐占位符，但文本对齐：中心没有在Safari上工作，多次试验后，我碰到一个解决方案，这将不能保证确切的中心，但可以足够的需求来了。

解决方案=>使用文本缩进

input{
    height:40px;
   width:190px;
   text-indent:60px;
}

Answer 5:

如果你想要把一个占位符成你需要设置的textareas高度，并设置行高到占位符的高度和文本对齐中心textarea的中心。这里是所有可用的方法为止。

textarea {
    min-height: 60px;
}

textarea::-webkit-input-placeholder,  {
   text-align: center;
   line-height: 60px; // Input Height
}

textarea:-moz-placeholder { /* Firefox 18- */
   text-align: center;
   line-height: 60px; // Input Height
}

textarea::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;
   line-height: 60px; // Input Height
}

textarea:-ms-input-placeholder {  
   text-align: center;
   line-height: 60px; // Input Height
}

文章来源: Centering textarea placeholder text in Safari