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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

3回答

5404閲覧

inline-blockについて。

Susanoo2442

総合スコア153

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/05/19 09:08

質問です。

WEBページを制作している途中に
良く理解できない事が起こりました。

html

1<div class="aaa">カテゴリ</div>

css

1.aaa{ 2 width:1000px; 3 height:50px; 4 background-color:#000000; 5 color:#FFFFFF; 6 vertical-align:middle; 7 text-align:center; 8 margin:auto; 9 } 10 11 12

といった感じのコードで簡単に説明しますと
ボックスをページ全体の中央に位置さして
その中の“カテゴリ”の文字もそのボックスの中央に
位置させたいという事なのですが

この、コードだけですと
確かにボックスの位置は、ページの中央には位置させる事ができますが
“カテゴリ”のテキストは
“vertical-align”と“text-align”が使えないため
中央には位置させれないと思います。

そこで、前述したcssのコードに“inline-block”を追加しました。
すると、たしかに“カテゴリ”のテキストはボックスの中央に位置できたのですが

今度は、ボックス自体が中央に位置しなくなりました。

そこで、今度はさっきとは真逆に前述したcssのコードから“inline-block”を消しました。
すると、今度はボックスもボックスの中のテキストも真ん中に位置していました。
“inline-block”は解除したのに何故ボックスの中の“カテゴリ”テキストまでが中央に位置しているのでしょうか?

うやむやにしたまま次の作業に移りたくないため
質問させて頂きました。

回答お願い致します。

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

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

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

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

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

Lhankor_Mhy

2016/05/19 09:23

現象を確認します。『ボックスの位置は、ページの中央には位置させる事ができますが “カテゴリ”のテキストは “vertical-align”と“text-align”が使えないため中央には位置させれないと思います』←これは、ボックスが横中央・縦上付、テキストが横中央・縦上付という意味でいいですか? 
Lhankor_Mhy

2016/05/19 09:24

続いて、『“カテゴリ”のテキストはボックスの中央に位置できたのですが 今度は、ボックス自体が中央に位置しなくなりました』←これは、ボックスが横左寄・縦上付、テキストが横中央・縦上付という意味でいいですか? 
Lhankor_Mhy

2016/05/19 09:26

最後に、『すると、今度はボックスもボックスの中のテキストも真ん中に位置していました』←これは、ボックスが横中央・縦上付、テキストが横中央・縦上付という意味でいいですか? 
Susanoo2442

2016/05/19 15:36

すいません。 説明不足でした。 ボックスに対しては 横中央上揃いです。 テキストは、横中央の縦中央揃いです!
guest

回答3

0

  • インライン要素とブロック要素について
  • cssプロパティについて

仕様書を読んでみると良いでしょう。
すでに他の回答者さんもおっしゃっていますがtext-alignが効かないのはインライン要素のみです。

質問文を読んでいると、質問者さんは.aaaに対して指定したスタイルはテキストノードの「カテゴリ」に対して作用する(div.aaaとテキストノード「カテゴリ」を同等のもの)と考えてらっしゃるのかもしれませんが、そうではありません。
「カテゴリ」というテキストノードは「div.aaaの子要素」の扱いになります。
そのため、div.aaaがinlin-blockでもblockでも「カテゴリ」は中央揃えになります。

今度は、ボックス自体が中央に位置しなくなりました。

inline-blockにすると何故そのような振る舞いになるか?についてですが

inline-blockの仕様

  • ブロック要素のように width、height、上下の padding と margin を指定できる box を作る
  • img 要素 (置換インライン要素)のように行内に流し込むことができる
  • 中身は block が指定されたときと同様に表示される
  • 外側は img 要素などの置換インライン要素と同様に表示される

この4つ目の仕様から、「外側」にあたるmargin:autoは0として扱われるため、
inline-blockにmargin:auto指定時は要素が左に寄ります。(注:祖先要素のtext-alignに依存するため、text-align:rightなら右へ寄る)
※marginに対してauto以外の値を入れるとちゃんと効きます

vertical-alignに関して

vertical-alignプロパティは、

  • インライン要素とテーブルセル同士で「隣接している要素」
  • ブロックレベル要素には適用にはできない

つまるところ<div class="aaa">カテゴリ</div>の.aaaに対して設定しても、ブロック要素内包要素はテキストノードのみの為、効きません。

効かせたければ一工夫いれて親にあたるdiv要素に擬似要素:beforeを使用するなどする必要があります。
(※先の例は間違えていたので訂正)

.aaa{ width:1000px; height:50px; background-color:#000000; color:#FFFFFF; text-align: center; margin:auto; } .aaa:before{ content: ''; display: inline-block; width: 0px; height: 100%; vertical-align:middle; }

最近だとflexboxを使う手法が簡単かと思います。

投稿2016/05/19 11:33

編集2016/05/19 17:45
manabufukai

総合スコア700

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

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

0

display:blockでもinline-blockでもtext-alignは有効ですよ
逆にvertical-alignはどちらの場合も無効ですね、有効にしたい場合はdisplay:table-cellでしょうか。

ちなみにdiv.aaaをページ全体の中央にというのは、左右だけでなく上下も中央に配置したいのでしょうか?

投稿2016/05/19 09:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Susanoo2442

2016/05/19 15:48

回答ありがとうございます。 ボックスは上揃いの 横中央で “カテゴリ”テキストは 縦横中央にしたいと存じております。 つまり、今現在は margin: auto ;でボックスを中央に 持ってきております。 テキストtext-align:center;と vertical-align:middole;で縦横中央に 持ってこさせようとしております。 ちなみに、私はAtomを使っているのですが table-cellでtextとverticalを有効にしようと試みたのですが 何度やっても table-cellだけcssに反映されませんでした。
guest

0

ベストアンサー

CSS

1/*display: block; の場合*/ 2.aaa{ 3 width:1000px; 4 height:50px; 5 background-color:#000000; 6 color:#FFFFFF; 7 vertical-align:middle; /*効かない= display:block;では無効*/ 8 text-align:center; /*効く=ボックス内で左右中央になる*/ 9 margin:auto; /*効く=ボックスごと左右中央になる*/ 10 } 11 12/*display: inline-block; の場合*/ 13.aaa{ 14 display:inline-block; 15 width:1000px; 16 height:50px; 17 background-color:#000000; 18 color:#FFFFFF; 19 vertical-align:middle; /*効かない= ボックス内のテキストには反映されない ※1*/ 20 text-align:center; /*効く=ボックス内で左右中央になる*/ 21 margin:auto; /*効かない=左に寄る*/ 22 } 23/*※1 24 高さの異なるinline-blockのボックス同士をvertical-alignで上下中央にすることは可能ですが、 25 固定の高さを持つボックス内でテキストノードを上下中央にすることはできません。 26*/ 27 28/*display: table-cell; の場合*/ 29.aaa{ 30 display:table-cell; 31 width:1000px; 32 height:50px; 33 background-color:#000000; 34 color:#FFFFFF; 35 vertical-align:middle; /*効く= ボックス内で上下中央になる*/ 36 text-align:center; /*効く=ボックス内で左右中央になる*/ 37 margin:auto; /*効かない=display:table-cell;ではmargin無効*/ 38 } 39 40/*display:flex;の場合*/ 41.aaa{ 42 display:flex; 43 width:1000px; 44 height:50px; 45 background-color:#000000; 46 color:#FFFFFF; 47 /*vertical-align:middle; flexboxではvertical-align無効*/ 48 text-align:center; /*効く=ボックス内で左右中央になる*/ 49 margin:auto; /*効く=ボックスごと左右中央になる*/ 50 align-items: center; /*ボックス内でflexアイテムを上下中央にする*/ 51 }

まぁザッとこんな感じです。
display:flex;が一番少ないHTML要素で柔軟にレイアウトをコントロールできます。
が、ちょっと古い環境もサポートする必要がある場合、全く書式の異なる複数の記述を併記する必要がありますし、
IE9以下の場合には完全に無効となります。それでよければflexが良いのではないかと。

もしレガシー環境も考慮する必要があるなら、.aaaの内側にもう一つdiv.bbb等を追加すれば
やりようはいくらでも有ります。(display:table-cellでもposition:absoluteでも)

あと、もし.aaaの高さが50px固定で、中に入るテキストも確実に1行で折り返しは無いと断言できるなら、
最初のコード(display:block;前提のもの)にline-height: 50px;を追加する形でも
ボックス内でテキストを上下中央にできますよ。

投稿2016/05/20 15:02

aKusano

総合スコア3763

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問