CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
CSSのみで縦横比を保つレスポンシブなグリッド - ./ringo
あまり情報が見つからなかったので、同僚の方がやっていたものを参考に。 グリッドのデザインなんかで縦と横の比率を変えたくないことがたまにあって、 その場合、window.resizeのイベントで高さを再計算したりしていた。 それがちょっといやだったのでCSSのみでどうにか実現してみた。 http://jsfiddle.net/w3jPr/1/ ウィンドウサイズを変えるとそのままの比率で大きさが変わるようになった。 仕組み 全体の高さの指定 グリッドのエリアの高さはpadding-topで指定します。 padding-topはwidthを基準にするので、 幅が変わると比率の変化なしで大きさが変わります。 グリッドの大きさの指定 グリッド個別の大きさの指定はpositon: absoluteで行います。 top、left、right、bottomをそれぞれ記述して、幅と高さを指定します。 これも
position:absolute、margin:0 autoして左右中央配置する - not good but great
width/2だけネガティブマージンは面倒 position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。 ウンチを上下左右中央配置している。 top,left,right,leftをauto以外の値にする 上下左右中央配置にする .iconImage{ position: absolute; top:0; left: 0; right: 0; bottom: 0; margin:auto; width:145px; height:145px; background:url("http://jsrun.it/assets/2/X/4/b/2X4bJ.png") no-repeat; border-radius:10px; } top
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
