ポップアップで出現する画像が中央配置になならい。

ポップアップで出現する画像のコードを書いているのですが、出現する画像が中央配置になりません。1300ｐｘの画面では真ん中に見える画像でも、600ｐｘの画面で観覧すると、中央配置にならないです。javascriptはちゃんと起動します。

text-align: center; margin 0 autoを追加しても中央配置になりません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>ポップアップ</title>
6  
7  <meta name="viewport" content="width=device-width,initial-scale=1">
8  
9  <style>
10
11
12 .wrapper {
13        overflow: hidden;
14  
15     }
16     .popup {
17  
18  left: 0;
19  top: 0;
20  width: 100%;
21  height: 100%;
22  z-index: 9999;
23  opacity: 0;
24  visibility: hidden;
25  transition: .6s;
26}
27.popup.is-show {
28  opacity: 1;
29  visibility: visible;
30}
31/* 表示画像のスタイル */
32.popup-inner {
33  
34  text-align: center;
35  
36  width: 90%;
37  height: 90%;
38
39  
40  padding: 70px;
41  background-color: rgb(49, 194, 239);
42  z-index: 2;
43}
44/* 表示画像のスタイル */
45.popup-inner img {
46  width: 100%;
47
48  
49}
50/* 閉じボタンをクリックすると閉じるイベントを発動する領域（✖ボタンの部分に領域してい */
51.close-btn {
52  position: absolute;
53  right: 0;
54  top: 0;
55  width: 50px;
56  height: 50px;
57  line-height: 50px;
58  text-align: center;
59  cursor: pointer;
60}
61/* 閉じボタンのスタイル */
62.close-btn i {
63  font-size: 20px;/* 閉じボタンの大きさ */
64  color: #333;/* 閉じボタンの色 */
65}
66/* 閉じボタンのスタイル */
67.close-btn1 {
68  position: absolute;
69  right: 0;
70  top: 0;
71  width: 50px;
72  height: 50px;
73  border-radius: 50%;
74  line-height: 50px;
75  font-size: 20px;
76  font-weight: bold;
77  cursor: pointer;
78}
79
80
81
82img.examplepopwindow001{
83
84
85  height: 260px;
86  width: 64%;
87  margin-bottom: -1px;/* 下余白vertical-align: bottom;効かない */
88  
89}
90  </style>
91</head>
92<body>
93
94<div class="wrapper">
95
96    <div class="popup" id="js-popup">
97        <div class="popup-inner">
98            <div id="close-btn1" class="close-btn1">✖</div>  
99          <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
100          <img src="image2/600.png" alt="ポップアップ画像" class=" examplepopwindow001">
101          </div>
102        <div class="black-background" id="js-black-bg"></div>
103      </div>  
104    
105      
106
107
108<script>
109
110window.onload = function() {
111  var popup = document.getElementById('js-popup');
112  if(!popup) return;
113  popup.classList.add('is-show');
114
115  
116
117  var blackBg = document.getElementById('js-black-bg');
118  var closeBtn = document.getElementById('js-close-btn');
119
120  closePopUp(blackBg);
121  closePopUp(closeBtn);
122  
123
124  function closePopUp(elem) {
125    if(!elem) return;
126    elem.addEventListener('click', function() {
127      popup.classList.remove('is-show');
128    })
129  }
130}
131
132</script>
133</div>
134</body>
135</html>

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

回答1件

ベストアンサー

下記を追加したらどうでしょう。

css
1* {
2  box-sizing: border-box;
3}
4.popup-inner {
5  margin: auto;
6}

投稿2022/05/29 15:18

hatena19

総合スコア34367

gujhufiugho

2022/05/30 06:59

ありがとうございます。上記の方法で解決できました。ずっと解決できずにいたので、助かりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問