エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
float で横並びさせてリストを中央揃え(センタリング)させる方法 - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
float で横並びさせてリストを中央揃え(センタリング)させる方法 - Qiita
<div class="hoge"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> ↑こんな感じのhtm... <div class="hoge"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> ↑こんな感じのhtmlを想定します。 css position: relative; を使います。 大枠の要素(別にdivでもpでも他でも大丈夫)から指定していきます。 .hoge { position: relative; overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */ } .hoge ul { position: relative; left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */ float: left; } .ho