質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4952閲覧

中央寄せのdivの中に、左寄せのulを入れたい

scoa

総合スコア66

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/13 10:44

いつもお世話になっております。

下記のような形を実現したいのですが、
上手くいきません。
イメージ説明

・赤枠のdiv内は中央寄せ
・赤枠のdiv内にある、liは左寄せ
・レスポンシブ対応

<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> /*-------------------------------------- Reset --------------------------------------*/ body { font-family:Meiryo,"MS PGothic",arial,sans-serif; margin:20px; padding:0; font-size:14px; color:#333; } h1,h2 { margin:0; padding:0; } p { margin:0; padding:0; } ul { list-style-type:none; margin:0; padding:0; } li { margin:0; padding:0; } dl,dt,dd { margin:0; padding:0; } img { border:0; vertical-align:bottom; } dd { margin:0; } a { text-decoration:none; color:#333; } article,aside,figure,header,footer,nav,section { display:block; } table { border-collapse:collapse; } /*-------------------------------------- Style --------------------------------------*/ .hoge { border:1px red solid; } .hoge ul { width:100%; max-width:960px; margin:0 auto; } .hoge ul li { display:inline-block; margin-bottom:5px; } </style> </head> <body> <div class="hoge"> <ul> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> </ul> </div> </body> </html>

恐れ入りますが、ご教示の程よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Takamoso

2017/06/13 10:49

ソースコードコピーしましたが、どこが問題ですか?ちゃんと中央寄せされてるし、liは左寄せになっていますが。
scoa

2017/06/13 10:54 編集

早速ありがとうございます。 画面幅を狭めて、画像が落ちたとき、左寄せにならないでしょうか。 赤枠の中で、中央寄せにしたいのです。
Takamoso

2017/06/13 11:08

つまりスマホなどでは画像が1カラムで下に並んで中央寄せされていればいいということですか?
scoa

2017/06/13 11:23

はい、そのようにしたいです。ただし、1カラムではない場合も中央寄せになるようにしたいです。(例えば、質問の画像のように、最後の段の画像が2枚のときなど)
guest

回答1

0

ベストアンサー

これかなぁ。

Flexbox で全体を中央に配置しつつ最後の行を左揃えにする

残念ながら、CSSだけでの対応ではないですけど…

投稿2017/06/13 13:09

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問