imgを上下中央ぞろえにしたいのですが、なりません

https://teratail.com/questions/24542の続き。

<article id="lightbox-course">
			<div id="lightbox-tutor1">
				<div class="lightbox-course__inner"><img src="./img/index/pcimage.png" alt="iphone" class="close">
			</div>
			</div>
		</article>

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

.lightbox-course__inner {
    display: table;
}

#lightbox-course img.close {
    display: table-cell;
    vertical-align: middle;
}

下記のように、trになる部分がないと中央ぞろえに出来ないのでしょうか？
それともimgタグはインライン要素なので、display: table-cell;をつけても効かない仕様なのでしょうか？
.tr { display:table-row; }

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

回答1件

ベストアンサー

<html>
<head>
<style type="text/css">
<!--
.lightbox-course__inner {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ccc;
}

#lightbox-course img.close {
    position: absolute;
    margin: auto;
    width: 100px;
    height: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff0000;
}
-->
</style>
</head>
<body>
<article id="lightbox-course">
    <div id="lightbox-tutor1">
        <div class="lightbox-course__inner">
            <img src="./img/index/pcimage.png" alt="iphone" class="close">
        </div>
    </div>
</article>
</body>
</html>

こんな？

投稿2016/01/16 08:36

退会済みユーザー

総合スコア0

退会済みユーザー

2016/01/16 09:39

下記のみで出来てしまいました。 #lightbox-course > div { display: none; position:fixed; z-index:2; width: 40%; 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 { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿下記をつけずに出来てしまったのですが、 fixedが親にあると、abusoluteを子要素につけると、親にrelativeを入れた時と同じように、相対指定での配置になるのでしょうか？ .lightbox-course__inner { position: relative; width: 500px; height: 500px; background-color: #ccc; }

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