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 }

我正试图将分页图像居中。

此外，分页箭头是具有填充背景的图像。在计算机视图上它工作正常，但在手机上有一个我无法用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托管的随机箭头替换了你网站的箭头图像，只是显示了一些内容。

bootstrap：手机上图像链接的水平居中和背景颜色

1 个答案: