前提・実現したいこと
表題の通りにしたいのだが、右or 左に寄ります。
下記の通り、様々なこと絵お試しましたが、原因追及できませんでした。
恐れ入りますが、ご教授頂けると幸いです
発生している問題・エラーメッセージ
エラーメッセージ
試したこと
表題の原因追及のために、下記のことを行いましたが、結論原因追及ができませんでした。
・「.onsen-item-img」に
CSS
1transform: translate(-50%, -50%); 2 /* width: 30vw; */ 3 position: relative; 4 top: 50%; 5 right: 50%;
したがど真ん中に来ないです。
※なお、こちらのコードは下記のコードには記載していません。(ディベロップツールでのみ行いました。)
width: 30vw or 数値%を設定(試行錯誤)しても、ぴったし来ない;
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title></title> 8 9 <link rel="stylesheet" type="text/css" href="../css/destyle.css"> 10 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> 11 <!--flatpicker--> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> 13 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> 14 <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script> 15 <link rel="stylesheet" type="text/css" href="../Onsen/css/onsen.css"> 16</head> 17<body> 18 <main class="main"> 19 <section class="onsen"> 20 <div class="contents-inner"> 21 22 <ul class="onsen-list"> 23 <!-- 1 --> 24 <li class="onsen-item"> 25 <div class="onsen-item-img onsen-contents-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"> 26 <img src="../Onsen/img/onsen01.jpg" alt="温泉1"> 27 </div> 28 <div class="onsen-item-txt onsen-item-txt-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500"> 29 <div class="jp-text"> 30 <p class="ttl">貸し切り露天風呂「雲居の湯」</p><!-- /.ttl --> 31 <p class="desc1">弱酸性の湯質が優しく肌を包み込むような心地よさ <br> 32 最上階の露天風呂「雲居の湯」では、湯冷めしにくい食塩泉を <br> 33 熱海の町並みを遠方に望みながら・・・</p> 34 </div><!-- /.jp-text --> 35 </div><!-- /.onsen-contents-right --> 36 </li><!-- /.onsen-item --> 37 <!-- 2 --> 38 <li class="onsen-item"> 39 <div class="onsen-item-img onsen-contents-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"> 40 <img src="../Onsen/img/onsen02.jpg" alt="温泉2"> 41 </div> 42 <div class="onsen-item-txt onsen-item-txt-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="500"> 43 <div class="jp-text"> 44 <p class="ttl">美肌を促す乳白色の硫黄泉を</p><!-- /.ttl --> 45 <p class="desc1">まじりっけなしの白いにごり湯。鳥海山から引いた酸性の強い硫酸塩泉を、<br> 46 たっぷりと掛け流しています。<br> 47 四季の移り変わりを、天然温泉の湯に浸りながら味わってください。</p> 48 </div><!-- /.jp-text --> 49 </div><!-- /.onsen-contents-right --> 50 </li><!-- /.onsen-item --> 51 </ul><!-- /.onsen-list --> 52 </section><!-- /.onsen --> 53 </main><!-- /.main --> 54</body> 55
css
1.onsen-list { 2 -webkit-box-pack: justify; 3 -webkit-justify-content: space-between; 4 -ms-flex-pack: justify; 5 justify-content: space-between; 6 margin-top: 80px; 7} 8 9@media screen and (max-width: 599px) { 10 .onsen-list { 11 display: -webkit-box; 12 display: -webkit-flex; 13 display: -ms-flexbox; 14 display: flex; 15 -webkit-box-orient: vertical; 16 -webkit-box-direction: normal; 17 -webkit-flex-direction: column; 18 -ms-flex-direction: column; 19 flex-direction: column; 20 -webkit-box-align: center; 21 -webkit-align-items: center; 22 -ms-flex-align: center; 23 align-items: center; 24 } 25} 26 27.onsen-item { 28 position: relative; 29 margin-bottom: 290px; 30} 31 32@media screen and (min-width: 600px) and (max-width: 1179px) { 33 .onsen-item { 34 display: -webkit-box; 35 display: -webkit-flex; 36 display: -ms-flexbox; 37 display: flex; 38 -webkit-box-orient: vertical; 39 -webkit-box-direction: normal; 40 -webkit-flex-direction: column; 41 -ms-flex-direction: column; 42 flex-direction: column; 43 -webkit-box-pack: center; 44 -webkit-justify-content: center; 45 -ms-flex-pack: center; 46 justify-content: center; 47 -webkit-box-align: center; 48 -webkit-align-items: center; 49 -ms-flex-align: center; 50 align-items: center; 51 margin-bottom: 550px; 52 } 53} 54 55.onsen-item:nth-of-type(2) { 56 position: relative; 57 margin-bottom: 290px; 58 display: -webkit-box; 59 display: -webkit-flex; 60 display: -ms-flexbox; 61 display: flex; 62 -webkit-box-orient: horizontal; 63 -webkit-box-direction: reverse; 64 -webkit-flex-direction: row-reverse; 65 -ms-flex-direction: row-reverse; 66 flex-direction: row-reverse; 67} 68 69@media screen and (min-width: 600px) and (max-width: 1179px) { 70 .onsen-item:nth-of-type(2) { 71 display: -webkit-box; 72 display: -webkit-flex; 73 display: -ms-flexbox; 74 display: flex; 75 -webkit-box-orient: vertical; 76 -webkit-box-direction: normal; 77 -webkit-flex-direction: column; 78 -ms-flex-direction: column; 79 flex-direction: column; 80 -webkit-box-pack: center; 81 -webkit-justify-content: center; 82 -ms-flex-pack: center; 83 justify-content: center; 84 -webkit-box-align: center; 85 -webkit-align-items: center; 86 -ms-flex-align: center; 87 align-items: center; 88 margin-bottom: 550px; 89 } 90} 91 92.onsen-item-img img { 93 width: 525px; 94 height: 300px; 95} 96 97@media screen and (min-width: 600px) and (max-width: 1179px) { 98 .onsen-item-img { 99 margin-left: -350px; 100 } 101} 102 103.onsen-item-txt { 104 background-image: url(../../img/bg.png); 105 background-position: center; 106 background-size: cover; 107} 108 109@media screen and (min-width: 600px) and (max-width: 1179px) { 110 .onsen-item-txt { 111 width: 100%; 112 } 113} 114 115@media screen and (max-width: 599px) { 116 .onsen-item-txt.slide-up { 117 background-image: none; 118 -webkit-transform: translateY(); 119 transform: translateY(); 120 z-index: 9999; 121 } 122} 123 124.onsen-item-txt-right { 125 position: absolute; 126 top: 50%; 127 right: 0; 128 -webkit-transform: translateY(-50%); 129 transform: translateY(-50%); 130 width: 810px; 131 height: 380px; 132 line-height: 1.5; 133 padding: 20px; 134 z-index: -2; 135} 136 137@media screen and (min-width: 600px) and (max-width: 1179px) { 138 .onsen-item-txt-right { 139 /* position: absolute; 140 top: 50%; 141 left: 50%; 142 transform: translate(-50%, -50%); */ 143 left: 0%; 144 margin-top: 300px; 145 margin-right: 450px; 146 -webkit-transform: translate(-50%, 50%); 147 transform: translate(-50%, 50%); 148 } 149} 150 151.onsen-item-txt-right .jp-text { 152 text-align: center; 153 position: relative; 154 top: 40%; 155 left: 50%; 156 -webkit-transform: translate(-40%, -50%); 157 transform: translate(-40%, -50%); 158} 159 160.onsen-item-txt-right .jp-text .ttl { 161 padding: 30px 0px 50px; 162 font-size: 2.4rem; 163} 164 165.onsen-item-txt-right .jp-text .desc1 { 166 line-height: 2.0; 167} 168 169.onsen-item-txt-left { 170 position: absolute; 171 top: 50%; 172 left: 0; 173 -webkit-transform: translateY(-50%); 174 transform: translateY(-50%); 175 width: 810px; 176 height: 380px; 177 line-height: 1.5; 178 padding: 20px; 179 z-index: -2; 180} 181 182.onsen-item-txt-left .jp-text { 183 text-align: center; 184 position: relative; 185 top: 40%; 186 left: 40%; 187 -webkit-transform: translate(-40%, -50%); 188 transform: translate(-40%, -50%); 189} 190 191.onsen-item-txt-left .jp-text .ttl { 192 padding: 30px 0px 50px; 193 font-size: 2.4rem; 194} 195 196.onsen-item-txt-left .jp-text .desc1 { 197 line-height: 2.0; 198} 199 200@media screen and (min-width: 600px) and (max-width: 1179px) { 201 .onsen-item-txt-left { 202 /* position: absolute; 203 top: 50%; 204 left: 50%; 205 transform: translate(-50%, -50%); */ 206 margin-top: 200px; 207 margin-right: 450px; 208 } 209}
補足情報(FW/ツールのバージョンなど)
中央とは、何に対しての中央でしょうか?
また、水平方向でいいでしょうか?
あなたの回答
tips
プレビュー