javascript - Safariでのテキストエリアのプレースホルダーテキストの中央揃え

Question

のプレースホルダー テキストを中央揃えにしたいtextarea。以下のコードは Chrome と IE では問題なく動作しますが、Safari では左揃えになります。

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

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

Safari の中央に配置するにはどうすればよいですか (できれば CSS のみを使用してください)。

Answer 1

この問題は、他の人が行ったテストに関する限り、Safari 5.0およびに固有のものです。Safari 5.1 + Win7

Andrew Mは、MacとMacの両方（バージョンは言及されていない、おそらくそうではない）で動作しているSafari 6.0, 5.1と述べました。Firefox 11WindowsWin 7

以下のコードを、、でテストしたところ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 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
}

Answer 3

私は、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;
  }