在Safari中居中文本区域占位符文本

Question

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

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

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

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

- bevanb

---

你能试一下这个吗？https://dev59.com/3moy5IYBdhLWcg3wa9ff - kiranvj

尝试访问此链接：https://dev59.com/vG445IYBdhLWcg3wUote - Prashobh

它似乎在Safari 6.0、5.1和Firefox 11（Windows和Mac）中运行正常。http://jsfiddle.net/Gs5gU/ - Andrew M

@AndrewM Safari 5.0 受到影响。 - Knu

好的，我没有5.0版本进行测试。那看起来这可能是一个bug，实际上没什么人能做了... 这个问题已经在未来的版本中得到修复，而且只影响了特定的版本。 - Andrew M

Answer 1

这个问题只在其他人测试过的情况下，特定于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/

<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/

- Wallace Sidhrée

---

根据我在帖子底部提到的博客文章，看起来 Safari 5.1 + Win7 这个组合也不支持 text-align。我还没有在这个组合上测试过。 - Wallace Sidhrée

我也可以确认在Win7上的Safari 5.1无法正常工作。这篇MacWorld文章表明我们可能永远不会在Windows上看到Safari 6，因此看起来Safari 6的行为是真正需要关注的事情。 - Spencer Williams

Answer 2

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

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
}

- Case

Answer 3

我遇到了一个问题，需要将占位符居中对齐，但是在 SAFARI 上使用 text-align: center 无效。经过多次尝试，我找到了一个解决方案，虽然不能保证完全居中，但可以满足要求。

解决方案 => 使用 text-indent

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

- Poonam.JD

Answer 4

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

- Rathore

Answer 5

我做了一个简单的解决方案，适用于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;
  }

- João Rito Rodrigues