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

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

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

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

CSS

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

Q&A

解決済

4回答

173閲覧

divクラスを中央に寄せたい

gakukozuki

総合スコア16

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/08 07:05

編集2019/02/08 07:17

HTML

1 <footer> 2 <div class="footer-contents"> 3 <div class="content-item response"> 4 <h3 class="border">お問い合わせ</h3> 5 <p>Twitter: </p> 6 <p>Facebook:</p> 7 <p>Gmail: </p> 8 </div> 9 <div class="content-item time"> 10 <h3 class="border">対応可能時間</h3> 11 <p>週5日稼働可能</p> 12 <p>時間帯: 9:00 ~ 22:00</p> 13 <p>適宜対応します</p> 14 </div> 15 <div class="content-item area"> 16 <h3 class="border">対応可能エリア</h3> 17 <p>兵庫県</p> 18 <p>大阪府</p> 19 </div> 20 </div> 21 </footer>

CSS

1footer { 2 background-color : rgba(80,80,80,0.8); 3 overflow: hidden; 4 margin-top: 70px; 5} 6 7.footer-contents { 8 9} 10 11.content-item { 12 float: left; 13}

footer-contentsを中央に寄せたいのですが、なかなか上手くいきません。
幅をつけて margin: 0 auto; やtext-align: center;なども試したのですが上手くいきませんでした。
回答よろしくお願いします。

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

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

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

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

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

azuapricot

2019/02/08 07:06

コードはマークダウンボタン (<code>ってやつです)を押したらでてくる ```ここに言語を入力 コード ``` ↑の枠の中のコードという文言を消して貼りつけてください。 「ここに言語を入力」という文字を消してHTML、CSSと記述してください
kei344

2019/02/08 07:07

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
azuapricot

2019/02/08 07:11

float:left;とはいっているのですが、 フッター全体は真ん中に寄せてフッターの内部は左寄せ?にしたいのですか? どこを真ん中でどこを左にしたいのでしょう。
gakukozuki

2019/02/08 07:15

footer-contentsを中央寄せにし、content-itemを横並びにしようとしています。
m.ts10806

2019/02/08 07:19

この手のものは現状の表示の画面キャプチャと目指す状態の画像があったほうが分かりやすいですよ。
guest

回答4

0

ベストアンサー

CSS

1footer { 2background-color : rgba(80,80,80,0.8); 3overflow: hidden; 4margin-top: 70px; 5} 6 7.footer-contents { 8 display:flex; /*flex要素に変更*/ 9 justify-content: center; /*中央寄せ*/ 10} 11 12.content-item { 13 padding:0px 30px; /*適当にスペース*/ 14 text-align:center; /*ここも中央寄せしてみる*/ 15}

イメージ説明

最終イメージがのってなかったので適当に中央寄せしただけですがこんな感じでしょうか?

display:flexについてのURLも載せておきますね。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

投稿2019/02/08 07:20

編集2019/02/08 07:21
azuapricot

総合スコア2341

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

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

gakukozuki

2019/02/08 07:27

ありがとうございます。 解決できました!
azuapricot

2019/02/08 07:29

調整はしてないのでwidthで幅指定するなりpadding指定するなり微調整はご自由にという感じです~。 解決できたようでよかったです。
m.ts10806

2019/02/08 07:34

flexって便利ですねという話(回答見てflex最適案件と気づきました)
azuapricot

2019/02/08 07:37

(最近flexを知ってなんだこいつはスーパーマンかと思いました)
m.ts10806

2019/02/08 07:38

(あー分かります。flexで大抵解決しちゃいますもんね。自分で組むことあまりないけど・・)
azuapricot

2019/02/08 07:39

(この質問内容とはあまり関係ありませんが下記URLの回答コメント部分でflexに関してだったりいろいろなタメになるお話をスーパー親切な方がしてくれているので良ければちら見でもしてみてください。) https://teratail.com/questions/171520
m.ts10806

2019/02/08 07:44

(早速読みます。ありがとうございます)
guest

0

自分好みに見やすく整えただけですが

css

1footer { 2 background-color : rgba(80,80,80,0.8); 3 overflow: hidden; 4 margin-top: 70px; 5 text-align:center; 6} 7 8.footer-contents { 9 margin-left:10%; 10 margin-right:10%; 11} 12 13.footer-contents .content-item { 14 width : calc(100% /3) ; 15 float: left; 16 text-align:left; 17}

投稿2019/02/08 07:22

編集2019/02/08 07:33
m.ts10806

総合スコア80765

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

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

m.ts10806

2019/02/08 07:24

あ、中も中央に寄ってるからダメか。調整します。
m.ts10806

2019/02/08 07:28

解決したようなので「とりあえず参考」レベルになりますね。
gakukozuki

2019/02/08 07:29

ご協力ありがとうございます!
guest

0

CSS

1footer { 2 display: flex; 3 justify-content: center; 4}

投稿2019/02/08 07:22

x_x

総合スコア13749

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

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

0

.footer-contentsにoverflow: hidden;をかけるといかがでしょうか。

CSS

1.footer-contents { 2 width: 300px; 3 margin: 0 auto; 4 overflow: hidden; 5}

投稿2019/02/08 07:19

編集2019/02/08 07:23
zakioka

総合スコア34

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問