4

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

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

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

我怎样才能让它在 Safari 中居中（最好只使用 CSS）？

4

5 回答 5

2

这个问题是特定于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/

于 2013-01-22T15:47:44.813 回答
0 
input[type=textarea] 
{
  line-height: 1;
}
于 2014-05-30T09:29:16.943 回答
0

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

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

input{
    height:40px;
   width:190px;
   text-indent:60px;
}
于 2016-04-07T11:58:51.057 回答
0

如果要将占位符放入 textarea 的中心，则需要设置 textareas 高度并将 line-height 设置为占位符高度以及 text-align center。这是迄今为止所有可用的方法。

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
}
于 2016-07-23T16:47:41.493 回答
-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;
  }
于 2013-02-20T17:31:28.127 回答