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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

10478閲覧

css placeholderを上下中央にしたいが。。。

kazoogon

総合スコア281

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/30 19:18

まずplaceholderをどうcssで設定するのかわからずこの今のtextarea ::-webkit-input-placeholderのcssの内容で上下中央になるのかも不明です。お願いします

<!DOCTYPE html> <html> <head> <title>placeholder</title> <style> .textarea{ width:750px; height:300px; margin: auto; margin:auto 0; text-align: center; border-radius:10px; font-size:30px; border:solid 2px #BDBDBD; } .textarea ::-webkit-input-placeholder{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <textarea name="comment" class="textarea" cols="45" placeholder="ここに書いてください"></textarea> </body> </html>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

結論を言うと、左右の中央は設定できても、上下の中央は不可能ですが、
より問題が大きいかなと思うのが、セレクターの設定の仕方が間違っていますね。
以下の違い説明できますか?

css

1<style> 2/* ドットやシャープがないもの */ 3textarea { 4} 5 6/* ドット */ 7.textarea { 8} 9 10/* シャープ */ 11#textarea { 12} 13 14/* スペースがある */ 15.textarea ::-webkit-input-placeholder { 16} 17 18/* スペースがない */ 19.textarea::-webkit-input-placeholder { 20} 21</style>

投稿2016/11/30 20:14

編集2016/11/30 20:17
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

最近CSSのcalcと言うものをここで教えてもらったのですが、以下のような感じでどうでしょう。

CSS

1.textarea{ 2 width:750px; 3 height:300px; 4 margin-left:calc((100vw - 750px) / 2); 5 margin-top:calc((100vh - 300px) / 2); 6 text-align: center; 7 border-radius:10px; 8 font-size:30px; 9 border:solid 2px #BDBDBD; 10}

投稿2016/11/30 20:24

Hey_CH

総合スコア437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/11/30 20:29

「placeholderを上下中央に」ですよ。
Hey_CH

2016/11/30 22:36

眠くてぼけてました、すみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問