添付写真(全体像)の下部にある、google mapボタンと交通手段の画像が左に寄ってしまう問題です。
上のマップはmargin:0-auto;で中央配置できたのですが、下部は左寄りのままです。
青マーカーのようにガタンとなってるのをまっすぐに上と左右幅をきっちり合わせたいです。
googleボタンと交通手段画像を包んでるdiv( class="access_map" )をmargin:0-auto;したのですが、
そもそも"access_map"は全体画像の赤線いっぱいまで要素の幅があって、当然margin0-autoしたところで
なんも変わらない状態です。
その子要素のgoogleボタンと交通数手段画像に余計なpaddingもmarginも入っておらず、
どうやったら中央配置できるのか分からず困っています。
該当ページのphpとcssコードはすべて掲載いたします。
php
1<?php get_header(); ?> 2<div class="container"> 3 <div class="row"> 4 <div class="col-lg-12"> 5 <nav> 6 <h1 class="page-header"></h1> 7 <ol class="breadcrumb"> 8 <li><a href="<?php echo home_url('/'); ?>">Home</a></li> 9 <li class="active"><?php the_title(); ?></li> 10 </ol> 11 </nav> 12 </div> 13 </div> 14 <div id="access"> 15 <div class="hrm-block-row"> 16 <div class="hrm-block3"> 17 <div class="hrm-block3__row mb15"> 18 <div class="hrm-heading3"> 19 </div><!-- /.hrm-head.ing3 --> 20 <h2>山の川温泉</h2><br> 21 <h3>住所:〒413-0033 静岡県熱海市熱海1993-237<br>Tel:0557-52-3301</h3> 22 </div><!-- /.hrm-block3__row --> 23 <div class="hrm-block-gmap"> 24 <div class="hrm-block-gmap__map"><img src="<?php echo get_template_directory_uri(); ?>/images/map.jpg" alt=""></div> 25 </div><!-- /.hrm-block-gmap --> 26 <div class="access_map"> 27 <div class="googlemap_box"> 28 <p class="googlemap"><a href="https://www.google.co.jp/maps/place/%E3%80%92413-0033+%E9%9D%99%E5%B2%A1%E7%9C%8C%E7%86%B1%E6%B5%B7%E5%B8%82%E7%86%B1%E6%B5%B7%EF%BC%91%EF%BC%99%EF%BC%99%EF%BC%93%E2%88%92%EF%BC%92%EF%BC%93%EF%BC%97/@35.0844308,139.0751014,17z/data=!3m1!4b1!4m5!3m4!1s0x6019be572e540051:0x7d272addca4403fd!8m2!3d35.0844308!4d139.0772901" target="_blank" class="hrm-button4">Google Mapで見る<i class="hrm-icon-map"></i></a></p> 29 </div> 30 <div class="tab_wrap"> 31 <input id="tab1" type="radio" name="tab_btn" checked> 32 <input id="tab2" type="radio" name="tab_btn"> 33 <input id="tab3" type="radio" name="tab_btn"> 34 <div class="tab_area"> 35 <label class="tab1_label" for="tab1"><div class="button1">車でお越しの方</div></label> 36 <label class="tab2_label" for="tab2"><div class="button2">電車でお越しの方</div></label> 37 <label class="tab3_label" for="tab3"><div class="button3">飛行機でお越しの方</div></label> 38 </div> 39 <div class="panel_area"> 40 <div id="panel1" class="tab_panel"> 41 <img src="<?php echo get_template_directory_uri(); ?>/images/access_car.png" alt="car"> 42 </div> 43 <div id="panel2" class="tab_panel"> 44 <img src="<?php echo get_template_directory_uri(); ?>/images/access_train.png" alt="train"> 45 </div> 46 <div id="panel3" class="tab_panel"> 47 <img src="<?php echo get_template_directory_uri(); ?>/images/access_air_plane.png" alt="plane"> 48 </div> 49 </div> 50 </div> 51 </div> 52 </div><!-- /.hrm-block3 --> 53 </div><!-- /.hrm-block-row --> 54 </div> 55</div> 56<?php get_footer(); ?>
css
1/* ------------------------------------------------- * 2 * アクセスページ 3 * ------------------------------------------------- */ 4 #access { 5 margin: 0 auto ; 6 text-align: center ; 7} 8.hrm-block3__row h2, h3 { 9 text-align: left; 10} 11.hrm-block3__row h3 { 12 margin-top: 0 !important; 13 margin-bottom: 2.5rem !important; 14} 15.hrm-block3__row h2 { 16 margin-bottom: 0 !important; 17} 18.googlemap, .tab_wrap { 19 display: inline-block !important; 20} 21.access_map { 22 margin: 0 auto; 23} 24.tab_wrap{width:500px; margin:80px auto;} 25input[type="radio"]{display:none;} 26.tab_area{font-size:0; margin:0 10px;} 27.tab_area label{width:200px; height: 50px; margin:0 5px; display:inline-block;color:#333; border:solid 1px grey; border-bottom: none; background:white; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;} 28.panel_area{background:#fff;} 29.panel_area img{ border:solid 1px grey;} 30.tab_panel{width:100%; display:none;} 31.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;} 32.button1, .button2, .button3 { 33 width: 100%; 34 height: 50px; 35 margin: auto; 36 line-height: 50px; 37} 38/*交通手段画像 ボタンアクティブ時の色変更*/ 39#tab1:checked ~ .tab_area .tab1_label > .button1, #tab2:checked ~ .tab_area .tab2_label > .button2, #tab3:checked ~ .tab_area .tab3_label > .button3 { 40 background-color: #d3d3d3; 41} 42#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;} 43#tab1:checked ~ .panel_area #panel1{display:block;} 44#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;} 45#tab2:checked ~ .panel_area #panel2{display:block;} 46#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;} 47#tab3:checked ~ .panel_area #panel3{display:block;} 48 49 50.access { 51 width: 980px; 52 margin: 0 auto !important; 53} 54.googlemap { 55 border: solid 1px grey; 56 width: 220px; 57 padding: 30px; 58 text-align: center; 59} 60.googlemap:hover { 61 background-color: #BEFF15; 62} 63.googlemap img { 64 width: 100%; 65 height: auto; 66} 67.googlemap a { 68 text-decoration: none; 69 color:#333; 70} 71.googlemap a:hover { 72 text-decoration: none; 73 color:#333; 74} 75.access_map { 76 overflow: hidden; 77} 78.googlemap_box { 79 float: left; 80 width: 215px; 81 margin: 80px 0; 82} 83.tab_wrap { 84 float: left; 85 width: 760px; 86 padding-left: 3rem; 87}
何卒ご教示頂きたく、宜しくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/16 05:59