css - Bootstrap : horizontal centering and background color for image link on phone

Question

我在 bootstrap 中看到了一些水平居中元素的解决方案(col-md-offset-3 和 center-block)，但它们似乎都不起作用。我的代码是:

<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 }

我正在尝试使分页图像居中。

此外，分页箭头是具有填充背景的图像。在计算机 View 上它工作正常，但在手机上有一个我无法用 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>

我用一些由 CDN 托管的随机箭头替换了您网站的箭头图像，以便显示一些内容。