在 Safari 中居中 textarea 占位符文本

Posted 2023-03-05

【中文标题】在 Safari 中居中 textarea 占位符文本

【英文标题】：Centering textarea placeholder text in Safari

【发布时间】：2012-07-12 22:35:16

【问题描述】：

我想将我的textareas 的占位符文本居中。下面的代码在 Chrome 和 IE 中运行良好，但在 Safari 中是左对齐的：

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


:-moz-placeholder 
text-align:center;

如何让它在 Safari 中居中（最好只使用 CSS）？

【问题讨论】：

你可以试试这个***.com/questions/8558603/…

试试这个***.com/questions/4919680/…

它似乎可以在 Safari 6.0、5.1 和 Firefox 11（Windows 和 Mac）中运行jsfiddle.net/Gs5gU

@AndrewM Safari 5.0 受到影响。

好的，我没有 5.0 可以测试。那么它似乎是一个错误，没有人可以做很多事情......它已经在未来的版本中得到修复，并且它是一个非常具体的受影响版本。

【参考方案1】：

如果要将占位符放置在文本区域的中心，则需要设置文本区域高度并将行高设置为占位符高度以及文本对齐中心。以下是目前所有可用的方法。

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

【参考方案2】：

我遇到了这个问题，我必须将占位符居中对齐，但 text-align: center 在 SAFARI 上不起作用，经过多次试验，我遇到了一个解决方案，它不能保证准确的中心，但可以满足要求。

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

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

【参考方案3】：

input[type=textarea] 

  line-height: 1;

【参考方案4】：

我制作了一个适用于 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;
  

【参考方案5】：

这个问题是Safari 5.0 和Safari 5.1 + Win7 特有的——就其他人所做的测试而言。

Andrew M 说它正在开发 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/

【讨论】：

嗯.. 根据我在帖子底部提到的博文，Safari 5.1 + Win7 的组合也不支持text-align。我还没有在那个组合上测试过。

我还可以确认这不适用于Safari 5.1 on Win7。这个MacWorld article 表明我们可能永远不会在 Windows 上看到 Safari 6，所以看起来 Safari 6 的行为才是真正值得关注的事情。