Q&A
質問のコードは「form要素をセンタリング」はされていませんが、「formの内包要素（inputなど）」ということでしょうか。
ログインフォームのCSSを書いておりましたら、基本的なことなのですが疑問になることがあり、ご存知の方にご意見を伺いたいです。
form要素をセンタリングしたくて試しにtext-aline: center;を使ってみたらなぜかうまくいきました。ネットの情報でformやdivなどのブロックレベル要素にtext-alineは使えないというのを見たのですが、情報が間違っているのでしょうか？
これがheaderなどもともとインライン要素であったらわかります。display: inlineをしていません。
優先順位などの問題でインライン要素に上書きされている？のかもしれませんがはっきりわかりませんでした。
ブラウザfirefox最新版、chrome最新版
html
1<!DOCTYPE html> 2<html> 3 <head> 4 </head> 5 <body> 6 <form action="" method="post"> 7 <div id="id"> 8 ログインID<input type="text"> 9 </div> 10 <div id="pass"> 11 パスワード<input type="pasword"> 12 </div> 13 <div id="submit"> 14 <input type="submit" name="auth" value="認証"> 15 </div> 16 </form> 17 </body> 18</html>
css
1form{ 2 width 400px; 3} 4 5#id{ 6 text-align: center; 7 margin-bottom: 5px; 8} 9 10#pass{ 11 text-align: center; 12 margin-bottom: 5px; 13} 14 15#submit{ 16 text-align: center; 17}
回答1件
0
ベストアンサー
一見効いているように見えますが、実際text-align: center;が効いているのはinputなどのinlineの要素ですね。
試しにこうしてblockの要素を一緒においてみると分かりやすいかと思います。
html
1<div id="id"> 2 ログインID<input type="text"> 3 <div style="border:1px solid #000;width: 100px;height: 100px;">箱は中央によらない</div> 4</div>
投稿2016/10/20 03:29
総合スコア2722
あなたの回答
tips
プレビュー
