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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

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

Q&A

解決済

1回答

1440閲覧

ブロック要素内のそのまたブロック要素内のインライン要素を中央寄せさせる方法

kuroishi

総合スコア53

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

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

0グッド

0クリップ

投稿2018/04/18 02:58

編集2018/04/18 03:15

お世話になっております。現在サイト製作中の段階で問題があったため質問させていただきます。

今回、flexboxを使用したサイトを制作使用と考え試行錯誤しております。

イメージ説明

イメージとしては写真の通りですが、続いているdiv要素のある要素内にさらにdiv要素を作り文字を中央配置させたいと考え制作しています。

そこで、私は下記のようなコードを書きました。
HTML

<div style="" class="main_div"> <a style="" class="title" id="">A</a><br> <div style="" class="sub_div"> <a style="" class="sub_font" id="">a</a><br> <a style="" class="sub_font" id="">b</a><br> <a style="" class="sub_font" id="">c</a><br> <a style="" class="sub_font" id="">d</a><br> </div> </div>

CSS

.main_div { width: 100%; height: 100vh; color: white; background-color: white; display: flex; -js-display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; margin-left:auto; margin-right:auto; } .title { text-align: center; color: black; font-size: 50px; width: 90%;  margin-top: 1000px; } .sub_div { width: 85%; height: 75%; background-color: #D8DE3C; border-radius: 90px;  text-align: center; -webkit-align-items: center; align-items: center;  -webkit-justify-content: center;  justify-content: center; position: relative;  display: flex;  justify-content: center;  align-items: center; } .sub_font { text-align: center; color: black; font-size: 25px; width: 70%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%); position: relative; margin-right:auto; margin-left:auto; display: flex;  justify-content: center;  align-items: center; }

しかし、このようなコードを書いた際に文字は左右中央に配置することができましたが縦横に対して中央揃えにならず上寄りの状態になってしまいます。

そこで、今回の問題点である上下中央揃えの方法について教えていただきたいです。
よろしくお願いいたします。

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

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

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

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

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

stampdoor

2018/04/18 03:04

インラインcssではなくhtmlとcssに分けて記述してもらえますか?可読性が低いです。
m.ts10806

2018/04/18 03:20

style,idなど何も値を指定しないのであれば記述する必要ないのでは?
stampdoor

2018/04/18 03:30

ページ読み込み速度の向上の為などでインラインでcssを記述する必要がなければhtmlとcssの役割は分けるべきだと思います。メンテナンス性も向上しますし。
guest

回答1

0

ベストアンサー

親要素に対して以下を指定すればよいかと思います。

CSS

1.foo { 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 align-items: center; 6}

flex-wrap: wrap; を flex-direction: column;
align-content: center; を align-items: center;
に修正しました。

コレだと<br>が無くとも縦一列になります。

参考:http://frontenddaily.work/flex/801
codepenで確認する↓
https://codepen.io/RaRukAnA/pen/erYYXq

投稿2018/04/18 03:14

編集2018/04/18 03:52
Atsushi_Okumura

総合スコア355

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

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

stampdoor

2018/04/18 03:33

flex-direction:columnもいれると子要素に幅を入れなくても良いので良いのでは?
Atsushi_Okumura

2018/04/18 03:46

確かにそうですね!子要素は縦に1列のようなので。 となるとむしろ flex-wrap: wrap; これの代わりに flex-direction: column; ですかね。
Atsushi_Okumura

2018/04/18 04:00

codepenの内容を質問者様のHTMLに合わせて変更しました。
kuroishi

2018/04/18 07:20

ご回答ありがとうございます。 sub_divなんですが、width:50%などの%での設定ではCSSは効かないんでしょうか。 よろしくお願いいたします。
Atsushi_Okumura

2018/04/18 08:00

もちろん効きます。codepen更新しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問