質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 4,148

hanamaru

score 11

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

html内の記述は以下のようにしています。
<textarea id="id_textarea2" readonly="true"></textarea>

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>で囲む方法も試しましたが駄目でした。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

ex: ※ダミーのテキストエリアの文字を上下中央揃えにしているだけです。元のテキストエリア非表示・javascriptは適時作成ください。
<textarea id="id_textarea2" readonly="true"></textarea>
<div class="dummy_textarea_wap">
  <div id="dummy_textarea" contenteditable="plaintext-only"></div>
</div>
.dummy_textarea_wap {
  display: table;
  height: 300px;
  width: 300px;
}
#dummy_textarea {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd;
  height: 100%;
  width: 100%;
  word-break: break-all;
}
参考: Vertically centered textarea - codepen


ただ、提示されているコードを見たところtextareaはreadonlyになってますし、cssでoverflow: hiddenにもなっていますので、textareaの文字を上下中央揃えではなく、textareaそのものを上下中央に表示させたいと言うことでしょうか?
であればtextareaの高さが30pxに固定されていますので、topを50%にし、margin-topに高さの半分をネガティブマージンで指定してあげれば良いかと思います。
#id_textarea2 {
   position:absolute;
   z-index: 5;
   top: 50%; /* 50%を指定 */
   left: 0%;
   margin-top: -15px; /* height/2 をネガティブマージンで指定 */
   width: 150px;
   height: 30px;
  /* 以下略 */
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/13 12:50

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

    キャンセル

  • 2015/09/13 13:54

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

    キャンセル

  • 2015/09/14 00:49

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

    キャンセル

  • 2015/09/14 10:45

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

    キャンセル

0

top: 300px が、position:absolute; から300pxの位置に押し下げています。
数字を調整してみるか、 position: relative; にしてtopを外してみるかしてみては如何でしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/13 12:52

    ご回答、有難う御座います。
    この方法を試してみましたが、テキストエリア自体が表示されなくなってしまいました。
    違う方法を探してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる