マージンで　上下中央揃えBlog

 

 

 

お仕事覚え書き　ですよ～

ウェブのお仕事人じゃない人は

なんのこっちゃ　な話なので、このページは読み飛ばしてくださいね
 

え～　いまさら　そんな悩み～？

っていわれそうだけど、

たとえば、アイコンとか、写真とかを文章の横に並べる時。。。

文章が　短くても、長くなっても

いつも真ん中に位置付けたい時がありますよね。　こんなふうに↓。。

テーブルコーディングをしていた時は、

align=”center”で解決していたのに、

cssコーディングでは　vartical-align:middle がきかなかったりして、

あれ～？

padding-top や　height数値　と同じ　line-height 数値　で対応したりしてました。。

でも、上の画像のように、

heightが　固定じゃなく、伸び縮みする場合は？

そこで

　教えてもらった方法　
 

—————–HTML—————–
<ul>
<li><div class=”btn_map_view”>地図アプリで見る</div><p>テキストテキストテキスト</p></li>
<li><div class=”btn_map_view”>地図アプリで見る</div><p>テキストテキストテキストテキストテキストテキスト</p></li>
<li><div class=”btn_map_view”>地図アプリで見る</div><p>テキストテキストテキスト</p></li>
</ul>
—————–CSS——————-
li {position:relative; adding-bottom:5px; padding-right:74px; margin-bottom:5px; border-bottom:1px solid #c8c8c8;}
li .btn_map_view { position:absolute; top:50%; right:0px; margin-top:-21px;width:55px;height:30px;padding:6px 2px 0 17px; line-height:1.2; text-align:center; font-size:.8em; color:#fff; background:url(.xxx.png) left top no-repeat;}
—————————————-

赤文字　がポイントですよ。

アイコンを top:50%　で指定するんですけど、

アイコンの height は　30px　なので、

その半分　15px で　margin-top:-15px 。

でも、ここでは、padding-top:6px　があるので、

15px ＋ 6px　＝　margin-top:-21px
 

が正解。

正直、ずんぐ　も　いまだよく分かってないですが、

とにかく言われた通りしたら、うまくいったので、

今後のために、おぼえがき～