在Safari中将textarea占位符文本居中 | 在Safari中将textarea占位符文本居中

本文介绍了在Safari中将textarea占位符文本居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将 textarea 的占位符文本居中。以下代码在Chrome和IE中正常工作，但在Safari中左对齐：

I want to center the placeholder text for my textareas. The code below works fine in Chrome and IE, but is left-aligned in Safari:

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

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

如何在Safari中居中/ p>

How can I get it centered in Safari (preferably only using CSS)?

推荐答案

我做了一个简单的解决方案，在Safari 5+和所有其他浏览器，你可以检查它：

I made a simple solution that works on Safari 5+ and all other browser you can check it at: 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;
  }

这篇关于在Safari中将textarea占位符文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！