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

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

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

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

CSS

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

Q&A

解決済

1回答

586閲覧

助けてください。複数の<div>要素を中央寄せしたいです。

rola.716

総合スコア10

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/26 08:57

前提・実現したいこと

html css で複数の<div>要素を中央寄せしたいです。
まだまだ初心者で。。。教えて頂ければ幸いです

発生している問題・エラーメッセージ

色々試したのですが、 左寄せのままになってしまっています

該当のソースコード

<div class="header03"> <div class="header03menu"> <div class="header0301"> <img src="assets/images/logo02.png"> </div> <div class="header0302"> <div class="cp_ipselect cp_sl01"> <select required=""> <option value="" hidden="">全てのカテゴリー</option> <option value="1">ビューティ・コスメ</option> <option value="2">ビューティ・コスメ</option> <option value="3">ビューティ・コスメ</option> <option value="4">ビューティ・コスメ</option> </select> </div> </div> <div class="header0304"> <form action="" method="post"> <input type="search" name="q" value="" placeholder="キーワードや商品番号を探す"><input type="submit" name="btn_search" value="検索"> </form> </div> <div class="header0303"> <div class="iconmenu"> <a href=""><img src="assets/images/icon01.png"> <p>閲覧履歴</p></a> </div> <div class="iconmenu"> <a href=""><img src="assets/images/icon02.png"> <p>ログイン</p></a> </div> <div class="iconmenu"> <a href=""><img src="assets/images/icon03.png"> <p>お気に入り</p></a> </div> <div class="iconmenu"> <a href=""><img src="assets/images/icon04.png"> <p>カート</p></a> </div> </div> </div> </div> .header03{ margin-top: 20px; } .header03menu{display:flex; } .header0302{padding-left: 30px; } .cp_ipselect {overflow: hidden; width: 100%;margin: 2em auto; text-align: center;} .cp_ipselect select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none;outline: none;background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none;} .cp_ipselect select::-ms-expand { display: none;} .cp_ipselect.cp_sl01 { position: relative; border: 1px solid #bbbbbb; background: #ffffff; margin: 0;} .cp_ipselect.cp_sl01::before {position: absolute;top: 1em;right: 0.9em;width: 0;height: 0;padding: 0; content: '';border-left: 6px solid transparent; border-right: 6px solid transparent;border-top: 6px solid #666666;pointer-events: none;} .cp_ipselect.cp_sl01 select { padding: 8px 38px 8px 8px; color: #666666;} input[type=search] { -webkit-appearance: none; display: inline-block; margin-right: 0; padding: 10px;width: 300px;height: 39px;font-size: 100%; box-sizing: border-box; border: 1px solid #ccc; border-right: none;} input[type=submit] { -webkit-appearance: none; display: inline-block; padding: 0 10px; color: #fff; width: 50px; height: 39px; font-size: 100%; vertical-align: top; border: none; background: #d65353;} .header04{ background: #a4dfc1; display: flex; justify-content: center; align-items: center;height: 50px;} .gnav { display: flex; height: 2rem; margin: 0 auto; width: 1000px; padding: 0;} .gnav > li {width: 25%;} .gnav li { list-style: none; position: relative;} .gnav li a { background: #a4dfc1; color: #000; display: block; height: 2rem; line-height: 2rem; text-align: center; text-decoration: none; width: 100%;} /*子階層以降共通*/ .gnav li li { height: 0; overflow: hidden; transition: .5s; z-index: 1000;} .gnav li li a { border-top: 1px solid #eee; text-align: left; padding-left: 5px;} .gnav li:hover > ul > li { height: 2rem; overflow: visible;} .gnav .gnavtitle::after { position: absolute;top: 13px; right: 16px; display: block; width: 5px; height: 5px; content: ""; transform: rotate(45deg); -ms-transform: rotate(45deg); border-right: 1px solid #000; border-bottom: 1px solid #000;} .search_container{ position: relative; box-sizing: border-box;border: 2px solid #3879D9;display: block; padding: 3px 10px; border-radius: 3px; height: 2.3em; width: 265px; overflow: hidden;} .search_container input[type="text"]{border: none; height: 2.0em;} .search_container input[type="text"]:focus {outline: 0;} .search_container input[type="submit"]{ cursor: pointer; font-family: FontAwesome; border: none; background: #3879D9; color: #fff; position: absolute; width: 3.5em; height: 3.0em; right:0px; top: -5px; outline : none;} .header0303{display:flex;} .iconmenu{text-align: center; padding-left: 24px;} .iconmenu p{color: #ababab;} .header0304{ width: 355px;}

試したこと

margin: 0 auto;

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

Lhankor_Mhy

2020/05/26 08:59

「中央寄せしたい複数のdiv」とはどれのことですか?
rola.716

2020/05/26 09:03

<div class="header03">の中の <div class="header0301> <div class="header0302> <div class="header0303> <div class="header0304> です! <div class="header0301> <div class="header0302> <div class="header0303> <div class="header0304> ↑この4つを中央寄せしたいです。
guest

回答1

0

ベストアンサー

css

1.header03menu { 2 display: flex; 3 justify-content: center; 4} 5

投稿2020/05/26 09:08

Lhankor_Mhy

総合スコア35871

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

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

rola.716

2020/05/26 09:11

出来ました!本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問