topプロパティの配置について

Question

topプロパティに関しまして、お聞きしたいことがあります。
コードの方は、コードペンのURLになりますこちらの上げさせて頂いたのですが、CSSの「.yoyaku_box a:before」この部分に対して、topプロパティを28%と設定しているのですが、ちょうど下記画像の虫眼鏡のアイコンが真ん中にくる形となります。しかし、真ん中に配置させようとした場合、50%と指定すれば、上から真ん中の位置に配置されるのが普通ではないかと考えているのですが、何故中途半端な28%の位置なのかが分かりません...

Answer 1

虫眼鏡アイコンの高さが20pxあるのでその分を考慮してtopを設定してあげる必要があります。
calcで計算できますので、アイコンの半分の高さ10pxを引いてあげましょう。

top:calc(50% - 10px);/*10pxはアイコンの高さの半分*/

Comments

[newyee]

ご回答ありがとうございます。
50%からアイコンの半分の高さを引くということなのですが、何故、半分の高さを引く必要があるのでしょうか?

[newyee]

真ん中に配置したいだけでしたら、10px分引く必要がないように思えたんですよね...

[colling]

top　はその外側のDIVの上辺からアイコンの上辺までの距離を指定しています。
ちょうど真ん中に置きたいので、アイコンの高さの半分を考慮しなければなりません。
絵に描いてみるとよくわかります。

[colling]

>真ん中に配置したいだけでしたら、10px分引く必要がないように思えたんですよね...

はい。考慮が足りなかったとしか言いようがありません、、。
cssはルールに則って配置しますので、元々できないこと以外は、こちらの指示の与え方が悪いということになります。

[colling]

topプロパティーのルールは、例えば　https://developer.mozilla.org/ja/docs/Web/CSS/top　に詳しく記載されています。