スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加

[css]floatで揃えた場合の中央揃え

floatでレイアウトした場合、以前紹介したような text-alignmargin の auto が利用できなくなります。
このため、別方法での中央ぞろえが必要となります。

以下は例です。










//一つ目のdivに対して、はみ出た部分を非表示にする
#main {
position: relative;
overflow: hidden;
}
//二つ目のdivに対して、左詰めにしてそこから親要素(#main)の半分の幅を移動
#main>div {
float: left;
position: relative;
left: 50%;
}
//三つ目のdivに対して、左詰めしてそこから親要素(#main>div)の半分の幅を戻る
#main>div>div {
width: 100%;
float: left;
position: relative;
left: -50%;
}


おぼろげに例文をかいているので合っているかは不明です。
詳しくは参考URLを参照してください。


参考URL:CSSでfloatした要素群を中央揃えにする
参考URL: [とほほのスタイルシート入門(セレクタ)]E > F { ... }
このエントリーをはてなブックマークに追加

コメントの投稿

非公開コメント

Translation


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
プロフィール

チーズくん

Author:チーズくん
個人的メモをただ羅列しています。
twitter:@cheese1038

バロメーター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。