下記のようにポジションfixedでdivを中央に表示させ、その中のimgも中央に表示させるライトボックスを作ったのですが、なぜかimgが左上ぞろいになってしまいます。 fixedをかけたボックスの

下記のようにポジションfixedでdivを中央に表示させ、その中のimgも中央に表示させるライトボックスを作ったのですが、
なぜかimgが左上ぞろいになってしまいます。

fixedをかけたボックスの中の、imgなどの要素は、中央ぞろえができないのでしょうか？

	<article id="lightbox-course">
		<div id="lightbox-tutor1"><img src="./img/index/pcimage.png" alt="iphone" class="close"></div>
		<div id="lightbox-tutor2"><img src="./img/index/tabletimage.png" alt="webservice"  class="close"></div>
		<div id="lightbox-tutor3"><img src="./img/index/spimage-top.png" alt="robot" class="close"></div>
		<div id="lightbox-tutor4"><img src="./img/index/spimage-center.png" alt="robot" class="close"></div>
	</article>

#lightbox-course div {
display: none;
position:fixed;
z-index:2;
width: 90%;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
vertical-align: middle;
margin: auto;
cursor: pointer;
background-color: #fff;
}

#lightbox-course img.close {
vertical-align: middle;
text-align: center;
background-color: #fff;
}

上記CSSは#lightbox-course img.closeとシャープがついているのですが、なぜか表記上はないことになってしまっています。
CSSは間違いなくあったっているのですが、上下真ん中になりません。

行動規範の内容に同意します

回答3件

ベストアンサー

imgをtext-alignでセンタリングする場合は、
img自身に指定するのでは無く、その親要素に指定します。

投稿2016/01/13 06:55

KakeruKaneko

総合スコア115

退会済みユーザー

2016/01/13 07:08

仰るとおり、親要素に入れた所、左右は中央になりました。親要素に指定するものだったのですね。ありがとうございます。ただ上下中央には相変わらずなりません。

退会済みユーザー

2016/01/13 07:16

インライン要素の左右中央ぞろえはすべて、親要素にテキストアラインセンターなのですね。

KakeruKaneko

2016/01/13 08:21

上下センタリングはdivだと難しいですね。 tableのtd要素に画像を入れる形にして tdに対してvertical-align: middle;を指定するか（table、tdの代わりにdisplay:table、display:table-cellでも可）、 javascriptで上下位置を計算するかですね。 (親要素の高さ ÷ 2) - (画像の高さ ÷ 2) この計算で親要素の中で画像が上下センタリングされる座標が分かります。 jqueryを使った場合は次のようなコードになります。 y = ($("親").height() / 2) - ($("画像").height() / 2); $("画像").css("top", y); //画像にはcssでposition:relativeまたはabsoluteを指定しておくこれを任意のタイミングで実行すればOKです。

退会済みユーザー

2016/01/13 08:55

お返事ありがとうございます。 vertical-align: middle;はテーブルとインライン要素に使えるとリファレンスにあったのですが、span要素に当てているので、中央にもって行きたいインライン要素のインライン要素である親要素にCSSを当てないといけないのかもしれないですね。つまり親がDIVの場合親がインライン要素でないので、意味のないspanを間に挟まないといけないということなのでしょうね。それか教えていただいたdisplay:tableにするかですね。今回は親divがfixedなので、ポジションですべて同じ値にするという方法が使えないと考えてよろしいでしょうか？

退会済みユーザー

2016/01/13 09:07

ただし、 <div id="lightbox-tutor1">達は、display:noneがついているので、ここにtableはつけられないですよね。 articleにつけて、imgにdisplay:table-cell;をつけるのでしょうか？

KakeruKaneko

2016/01/13 09:45

まず、インラインとテーブルセルでのvertical-alignの扱いは全くの別物と考えた方が良いです。今回意識するのはテーブルセルでのvertical-align。インライン要素は忘れてください。細かい説明するよりも実際のソースを見てもらった方が分かり易いので、以下を参考にしてみてください（そのまま貼り付ければ表示されるはずです）。クラス名は分かり易くtable、tr、tdとそのまま使っています。適した名称に変更して使ってください。色々とパラメータを変更してみて挙動の変化を確認してみてください。 <body> <style> .box { position:fixed; width:70%; height:70%; left:15%; top:15%; background:#eee; box-shadow:5px 5px 5px #ddd; } .table { display:table; width:100%; height:100%; } .tr { display:table-row; } .td { display:table-cell; vertical-align:middle; text-align:center; } .img { display:inline-block; background:#000; width:200px; height:100px; } </style> <div class="box"> <div class="table"> <div class="tr"> <div class="td"> <span class="img"></span> </div> </div> </div> </div> </body>

退会済みユーザー

2016/01/14 10:52

やってみました。確かに中央ぞろえになっていますね。ただ、下記の画像を中央ぞろえする場合は、もうひとつdivをはさむしかないですね。  <article id="lightbox-course"> <div id="lightbox-tutor1"><img src="./img/index/pcimage.png" alt="iphone" class="close"></div> <div id="lightbox-tutor2"><img src="./img/index/tabletimage.png" alt="webservice" class="close"></div> <div id="lightbox-tutor3"><img src="./img/index/spimage-top.png" alt="robot" class="close"></div> <div id="lightbox-tutor4"><img src="./img/index/spimage-center.png" alt="robot" class="close"></div> </article>

行動規範の内容に同意します

こんにちは。

lightbox-course div {

lightbox-course img.close {

のlightbox-courseは<article>タグの id なので
#lightbox-courseと「#」をつけるのでは？

センタリングについては、参考になりそうなサイトを見つけたので、見てみてください。
・position:absolute;やposition:fixed;で要素をきれいに中央配置する方法
・サイズが分からない要素を真ん中に配置するテクニック

投稿2016/01/13 06:41

kaputaros

総合スコア1844

退会済みユーザー

2016/01/13 07:15

こんにちはありがとうございます。上記CSSは#lightbox-course img.closeとシャープがついているのですが、なぜか表記上はないことになってしまっています。 CSSは間違いなくあったっているのですが、上下真ん中になりません。 vertical-align: middle; も親要素につけるのでしょうか？こちらは、インライン要素とテーブルの場合に使えるようなので、テキストのように、ラインハイトとハイトで中央ぞろえにできない際はこちらかなと思いました。親要素の<article id="lightbox-course">にポジションフィックスがついてしまっているので、ポジションでの中央ぞろえはできないですよね。

行動規範の内容に同意します

よくわからないけど、text-align:center;はdivに設定するべきでは？

投稿2016/01/13 06:05

otftrough

総合スコア476

退会済みユーザー

2016/01/13 08:16

otftrough

2016/01/13 11:52

上下なら、divのheightを指定して、line-heightを同じ値にすればいいと思います。そのままの意味で、行の高さを指定するものなので、2行以上の文や画像は中央にできませんが。

退会済みユーザー

2016/01/14 10:37

確かに、レスポンシブのフルイドイメージでなければ、それで良いと思うのですが、この場合は無理ですよね。インライン要素、imgタグにvertical-align: middle;はなぜ効かないのでしょうか？

otftrough

2016/01/14 11:03

ごめんなさい、わかりません。困ったときは、根本から考え方を変えてみるといいかもしれませんよ。私の場合は、imgタグを使わずに、 div.lightbox-tutor1{ width:600px; height:600px; border:solid 2px black; background-image:url("./img/index/pcimage.png"); background-repeat:no-repeat; background-position:center; } ってかんじで、画像をバックグラウンドとして表示させます。 background-position:center; の一行で縦方向も横方向も中央にきますし。

退会済みユーザー

2016/01/14 14:24

imgでなく背景にして中央ぞろえにするのですね。そんなアイデアもありましね。

行動規範の内容に同意します

あなたの回答