bootstrap：電話でのイメージリンクの水平センタリングと背景色

Question

ブートストラップ（col-md-offset-3とセンターブロック）の水平センタリング要素にはいくつか解決策がありましたが、どれも動作していません。 私のコードは次のとおりです。

<div class="col-md-12 col-sm-12 col-xs-12 paper-main"> 
          <img class="desert" src="<?= get_template_directory_uri().'/resources/img/prince_-desert2.png' ?>"> 
          <div class="col-md-1 col-sm-1 col-xs-1 page-arrow"> 
           <div class="center-block"> 
            <?php if ($paged > 1) : ?> 
             <a href="<?php echo get_previous_posts_page_link(); ?>"><img src="<?= get_template_directory_uri().'/resources/img/little-prince-right-arrow.png' ?>"></a> 
             <?php else : ?> 
             &nbsp; 
            <?php endif; ?> 
           </div> 
          </div> 
          <div class="col-md-10 col-sm-10 col-xs-10"> 
           <ul class="chapters-list"> 
            <?php 
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 

            $temp = $wp_query; 
            $wp_query = null; 
            $wp_query = new WP_Query(); 
            $wp_query->query(['cat' => ($paged+4), 'order' => 'ASC']); 
            $wp_query->max_num_pages = 3; 
            ?> 
            <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 
             <li> 
              <a> 
               <?php the_title() ?> 
              </a> 
             </li> 
            <?php endwhile; ?> 
           </ul> 
          </div> 
          <div class="col-md-1 col-sm-1 col-xs-1 page-arrow"> 
           <?php if ($paged < 3) : ?> 
            <a href="<?php echo get_next_posts_page_link(); ?>"><img src="<?= get_template_directory_uri().'/resources/img/little-prince-left-arrow.png' ?>"></a> 
           <?php endif; ?> 
          </div> 

CSS：

.page-arrow { padding: 0; } 

.page-arrow img, .paper-pagination img { background-color: #337ab7 } 
.page-arrow:hover img, .paper-pagination img:hover { background-color: #23527c } 

私は改ページ画像を中央にしようとしています。

また、ページ区切りの矢印は、背景が塗りつぶされた画像です。コンピュータビューで それがうまく動作しますが、携帯電話に、私はCSSで閉じることができないギャップがあります： Phone View:

Regular View:

Answer 1

あなたが水平方向の中央する矢印を望む当接し意味を明確にすることはできますか？今のところ、それらは水平方向の配置に関して均等に配置されているように見えます。

矢印を縦にも中央に配置することを意味しましたか？両方がデッドセンターの中心にある場合は、投稿したスクリーンショットにあるように、ページ全体で同じ行に並べることができません。

あなたは本当にただ水平方向の矢印の画像をセンタリングする方法を知りたいなかった場合、あなたはこのCSSを試みることができる：

.col-md-12 {max-width: 100%;} 
 
.center-block img {display: block; margin: 0 auto;}

<div class="col-md-12 col-sm-12 col-xs-12 paper-main"> 
 
          <img class="desert" src="<?php get_template_directory_uri().'/resources/img/prince_-desert2.png' ?>"> 
 
          <div class="col-md-1 col-sm-1 col-xs-1 page-arrow"> 
 
           <div class="center-block"> 
 
             <a href="<?php echo get_previous_posts_page_link(); ?>"><img src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-right-a.png" height="50" width="50"></a> 
 
             <?php else : ?> 
 
             &nbsp; 
 
            <?php endif; ?> 
 
           </div> 
 
          </div> 
 
          <div class="col-md-10 col-sm-10 col-xs-10"> 
 
           <ul class="chapters-list"> 
 
            <?php 
 
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
 

 
            $temp = $wp_query; 
 
            $wp_query = null; 
 
            $wp_query = new WP_Query(); 
 
            $wp_query->query(['cat' => ($paged+4), 'order' => 'ASC']); 
 
            $wp_query->max_num_pages = 3; 
 
            ?> 
 
            <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 
 
             <li> 
 
              <a> 
 
               <?php the_title() ?> 
 
              </a> 
 
             </li> 
 
            <?php endwhile; ?> 
 
           </ul> 
 
          </div> 
 
          <div class="col-md-1 col-sm-1 col-xs-1 page-arrow center-block"> 
 
           <?php if ($paged < 3) : ?> 
 
            <a href="<?php echo get_next_posts_page_link(); ?>"><img src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-left-a.png" height="50" widht="50"></a> 
 
           <?php endif; ?> 
 
          </div>

私がホストされているいくつかのランダムな矢印でサイトの矢印画像を置き換えちょうど何かが現れます。