Q&A
CSSが半端な状態で提示されています。
コピペで再現できるようにコードを提示してください。
HTMLも必要です。
この青色のdivを左右上下中央ぞろえにするためにtop calc left calc の式がどうして成り立つのでしょうか
解説ではtopからの距離は５０％のいちからdivの半分の高さを引いてあげればよいですね
leftに関しては５０％の位置からdivの半分の幅を引いてあげればいいでしょう
とあるのですが、５０％の位置また、引き算が成立するのはなぜですか
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSSの練習</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <div></div> </header> </body> </html>
body { margin: 0; } header { height: 200px; background: silver; position: relative; } div { width: 100px; height: 40px; background: skyblue; position: absolute; top: calc(50% - 20px); left: calc(50% - 50px);
一応、わかりますが、「再現可能な最小のソースコード」がある方が望ましいのは確かです。
https://ja.stackoverflow.com/help/minimal-reproducible-example
https://teratail.com/help/question-tips#questionTips3-5
画像も解像度が低すぎて、読めません。
回答3件
0
ベストアンサー
算数の問題です。
横500px、縦200pxの長方形の中に、
position: absoluteで横100px、縦40pxの長方形が置いてあったとします。
たかしくんは赤い長方形を上下左右中央に配置したいと考えています。
左上を起点として、左からいくつ、上からいくつずらせばいいでしょうか？
まず、左から50%(250px)、上から50%(100px)ずらすところまではわかりますね？
そうすると、右側の余白は250px-100px=150px、
下側の余白は100px-40px=60pxになりますね。
それぞれ、赤長方形の幅／高さの分、間隔に誤差が生じてしまっています。
じゃあ、こっからどーすりゃいいんじゃい！！って話ですが、
上下左右に中央寄せさせるには、ここから両端の間隔を同じにする必要があります。
赤長方形の幅／高さの分間隔の大きさが違うということは、
**半分ずつ負担してもらえば平等になるんじゃね？**とどこかの誰かが考えたわけです。
まず、上下中央寄せ。
40pxのはんぶん、20px上にずらしてみます。
上下ともに、100px-20px=80pxの間隔になりました。
お次は左右中央寄せ。
100pxのはんぶん、50px左にずらします。
左右ともに、250px-50px=200pxの間隔になりました。
というわけで、親要素の50%から子要素のはんぶんの値を引くと、
両端の間隔が同じ値になり、結果として親要素のど真ん中に子要素が配置されるのです。
投稿2020/05/09 05:29
編集2020/05/09 05:30
総合スコア354
0
top, left というのは親要素の左上を基準としてそこからの距離を指定することになります。
それを50%(親要素の高さ、幅の半分)にすると、青色のdivの左上の位置が親要素の中心にきます。
そこから、青色のdivの高さ、幅の半分だけ左上に移動させることで、親要素の上下左右中心に位置します。
投稿2020/05/09 03:01
編集2020/05/09 04:35
総合スコア33790
例えばtop 30px left 30pxであれば左上から30px下がって、右に30px移動だと思うのですが、この場合も動き方は同じですか？
そうですが、どの辺が疑問なのでしょうか。
いま、提示していただいた画像で動き方は理解できました。ありがとうございます。
50%ずつでは真ん中に配置されないのは理解できるのですが、そこからなぜdivの高さ、幅の半分ずつをずらせば真ん中に移動すると瞬時に理解できるのでしょうか？
２つめの画像をみて理解できないですか？
0
position: absolute が指定するのはボックスの左上の頂点です。
中央に寄せる為には「左上が50%の位置からどの方向に何pxずらせば良いのか」を考えれば、答えが出ます。
Re: teruyoru さん
投稿2020/05/09 02:36
総合スコア18170
その50%の位置というのはどこでしょうか？
ウインドウの左上です。
1000x1000の左上をx=0,y=0の座標とする場が存在した場合、
Q1. 中心点の座標はどこですか
Q2. 200x200のボックスの左上を中心点に置いたら、どうなりますか
Q3. 中央寄せとは言葉で説明すると、どういう状況ですか
Q4. 左右のマージンが等しいように200x200のボックスを配置した場合、左右のマージンはいくつですか
Q5. Q4を方程式に直すと、どうなりますか
方眼紙に直方体を書いてみるとか、算数的に幾何学の計算をしてみることを試みるべきかと思います。
Q6. 200x200のボックスの中心点はどこですか
の方がシンプルだったかもしれませんね。
あなたの回答
tips
プレビュー
