Q&A
早速のご回答ありがとうございます。
試してみたのですが、divに対するborder指定は効いており、aタグに対するborderは左横に見切れたようについているだけで、効いていないように思いました。
すみません。僕の理解力が足りていないと承知しているのですが、この結果が何を示しているか、教えて頂けますでしょうか...?
HTMLの要素の中央配置の方法についてお聞きしたいことがあります。
例えばなのですが、「aタグ」の中に「divタグ」を入れた場合はインライン要素の中にブロック要素を入れることになり、「aタグ」の幅指定ができず、divタグに対し、「margin:0 auto;」としても、marginが効かず中央に配置することができない、ということは理解できます。
しかし、aタグに対して、「display:block」とし、「width:100%」としてもmarginが適用されません。
どなたか、教えてくださる方いましたらご教授下さい。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>practice</title> 6 <link rel="stylesheet" href="memo.css"> 7 </head> 8 <body> 9 <a> 10 <div> 11 これは要素です 12 </div> 13 </a> 14 </body> 15 16 17 18 19</html>
CSS
1a{ 2 3 display:block; 4 width:100%; 5 6} 7 8div{ 9 margin:0 auto; 10} 11
回答2件
0
marginが効いていなのではなく、a要素の幅を100%にしたので、内包するdivの幅も100%(デフォルト)に広がってしまい、margin-left:auto;margin-right:auto;が意味をなしていないだけだと思います。なので、divの幅を指定してあげれば中央に配置されるはずです。
先の回答者様が、それぞれの要素にボーダーを付けてみると分かると仰ったのも、それを視覚的にわかりやすく見せるためでしょう。
投稿2018/06/29 06:34
総合スコア19
0
ベストアンサー
css
1a { 2border: 1px solid #F00; 3} 4div { 5border: 1px solid #00F; 6}
このようにしてみるとなぜmarginが効かないのかわかると思いますよ。
投稿2018/06/29 05:53
退会済みユーザー
総合スコア0
margin ってborder より外側の余白を表していますよね？そこは大丈夫？
あ、はい。大丈夫です！
すみません。僕勉強不足すぎるというか、理解力なさすぎますね...
patakoboさんにもご回答いただき、お二人のご回答を合わせて、理解することができました。
あまりにも初歩的な質問だった気がしております...
勉強にもっと励んでいきたいと思います...!!
「中央配置」で過去の質問を検索して見てください。過去にも同じ質問している人、かなりいますから。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/29 06:51