外部cssファイルにて、textarea内の文字列にvertical-align: middleを適用させたい

外部cssファイルにて、textarea内の文字列に
vertical-align: middle;
を適応させたいのですが、記述しても位置が上下の中央に変わりません。
(topの状態です)

html内の記述は以下のようにしています。

css内の記述は以下のようにしています。
#id_textarea2 {
position:absolute;
z-index: 5;
top: 300px;
left: 0px;
width: 150px;
height: 30px;
padding: 0px;
background-color: rgba(65,105,225,1.00);
box-shadow:rgb(0, 0, 0) 0px 0px 50px 0px inset;
-webkit-box-shadow:rgb(0, 0, 0) 0px 0px 50px 0px inset;
-moz-box-shadow:rgb(0, 0, 0) 0px 0px 50px 0px inset;
border-radius: 150px 150px 150px 150px / 50px 50px 50px 50px ;
color: white;
font-size: 25px;
text-align: center;
vertical-align: middle;
border:0;
outline: none;
resize: none;
overflow: hidden;
}

使用ブラウザはGoogleです。
html内のtextareaタグを<div>で囲む方法も試しましたが駄目でした。

どなたか助言を宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

textareaはあくまで文字を入力させるための要素ですので内に入力される文字にはvertical-alignは適応されなかったかと思います。
文字そのものをvertical-align: middleのように表示するには、下記のようなことをすれば可能だと思います。
0. divなどでvertical-align: middleで表示されるダミーのテキストエリアっぽいものを作成する
0. javascriptでダミーエリアクリック時にtextareaにフォーカスさせる
0. textareaに入力がある毎にダミーのテキストエリアに値を反映させるようにする

ex: ※ダミーのテキストエリアの文字を上下中央揃えにしているだけです。元のテキストエリア非表示・javascriptは適時作成ください。

html
1<textarea id="id_textarea2" readonly="true"></textarea>
2<div class="dummy_textarea_wap">
3  <div id="dummy_textarea" contenteditable="plaintext-only"></div>
4</div>

css
1.dummy_textarea_wap {
2  display: table;
3  height: 300px;
4  width: 300px;
5}
6#dummy_textarea {
7  display: table-cell;
8  vertical-align: middle;
9  text-align: center;
10  border: 1px solid #ddd;
11  height: 100%;
12  width: 100%;
13  word-break: break-all;
14}

参考: Vertically centered textarea - codepen

ただ、提示されているコードを見たところtextareaはreadonlyになってますし、cssでoverflow: hiddenにもなっていますので、textareaの文字を上下中央揃えではなく、textareaそのものを上下中央に表示させたいと言うことでしょうか？
であればtextareaの高さが30pxに固定されていますので、topを50%にし、margin-topに高さの半分をネガティブマージンで指定してあげれば良いかと思います。

css
1#id_textarea2 {
2   position:absolute;
3   z-index: 5;
4   top: 50%; /* 50%を指定 */
5   left: 0%;
6   margin-top: -15px; /* height/2 をネガティブマージンで指定 */
7   width: 150px;
8   height: 30px;
9  /* 以下略 */
10}

投稿2015/09/13 02:10

編集2015/09/13 02:11

KiKiKi_KiKi

総合スコア596

hanamaru

2015/09/13 03:50

ご回答、有難う御座います。適応範囲はテキストエリア自体ではなく、テキストエリア内の文字列に対してですので、ダミーのテキストエリアを作成してみました。が、今度はbottomの状態になってしまいmiddleは効きませんでした。 vertical-alignでの位置指定は出来ないようなので、余白等で調整したいと思います。

KiKiKi_KiKi

2015/09/13 04:54

textareaに高さが指定されてしまっていて、それ以上エリアの高さも変更されないのでどの部分を指してtopとかbottomとかと表現されているのでしようか？もしかして、高さ30pxの固定エリア内に25pxの文字1行だけをと言うことでしょうか？であれば、指定しているfont-familyや表示するブラウザによって若干上下の幅は変わってしまいますが、line-height: 30px; を指定してあげれば近しい答えになるかと思います

hanamaru

2015/09/13 15:49

『高さ30pxの固定エリア内に25pxの文字1行だけ』です。そして、line-height: 30px; の指定で上下中央に寄せる事が出来ました！有難う御座います！

KiKiKi_KiKi

2015/09/14 01:45

> hanamaruさん実現できて良かったです！line-heightは行間をきめるスタイルです。 font-sizeが16pxでline-heightが22pxなら22px-16px=6px これを上下3pxづつに割り振ります。これを利用すると1行だけの文章であればコンテナのheightとline-heightを同じ値にすることで上下中央の位置に文字を配置することができます。ただし、特に英文だとx-heightとかの概念が入ってくるのでgとかhとか上や下にはみ出している文字は必ずしも端からスペースが振られる訳ではありません。また、ブラウザによっても若干割り振り方が違ったりするので注意がしてください。

行動規範の内容に同意します