###親要素の横中央&親要素の一番下に表示し大きさを子要素に合わせる方法
まず、子要素のサイズに合わせるのでdisplay:inline-block;を適用しています。
次に親要素の一番下に配置するために、position:absolute;を使いbottom:0px;に設定。
最後に親要素の横中央に表示させる方法ですが、text-align:center;を設定していますが
下記2番目の画像のように真ん中ではなく右にズレてしまっています。
初心者ながら、absoluteとinline-blockとの競合?みたいのが発生していると
思うのですが、他にやり方(下記1番目の画像のように表示)はありますか?
だいぶ悩み試行錯誤致しましたが、解決に至らずお手上げ状態です。どなたかご教授お願いいたします。
###該当のソースコード
HTML
1<meta name="viewport" content="width=device-width, initial-scale=1"> 2<link rel="stylesheet" type="text/css" href="style.css"> 3<div id="header"> 4 <span id="title"> 5 <a href="/">TestText</a> 6 </span> 7</div> 8
CSS
1 #header{ 2 background-color: #ff0000; 3 position:relative; 4 width: 970px; 5 height: 120px; 6 margin: 0 auto; 7 text-align:center; 8 } 9 10 #title{ 11 background-color:#ffff00; 12 position:absolute; 13 bottom:0px; 14 display: inline-block; 15 } 16 17 #header #title a{ 18 font-size: 55px; 19 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/27 01:36