横並びの為にfloatしたliタグを中央寄せにする平成30年 6月 20日 作成
概略
横並びの為にfloatしたliタグに対し 左右マージンの値を指定しないで中央寄せしたい場面がでてきた為、実現可否の確認・可であればその手段を調査する。
手段
「position: relative;」を使った手法で実現可能。
実装方法
HTML
<div id="wrapper"> <ul> <li>テスト 1</li> <li>テスト 2</li> <li>テスト 3</li> </ul> </div>
CSS
#wrapper {
position: relative;
overflow: hidden;
}
#wrapper ul {
position: relative;
left: 50%;
float: left;
}
#wrapper ul li {
width: 10em;
position: relative;
left: -50%;
float: left;
}
行っている事は、ul要素を右に50%移動しli要素を左に50%移動さて中央寄せに。
デモ
考察
HTMLコードもすっきりとして良い感じ。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
