Question

我正在做一个小项目，有一个奇怪的问题无法解决自己。我有一个flex滑块库，该图像显示为带状波纹管的主要中心图像。但是由于某种原因，它显示功能区未居中，并且左右指针不起作用。这是该元素的代码：

<div class="col-lg-12">
                            <div class="gallery-single-post clearfix">
                                <div class="clearfix" id="slider">
                                    <?php inspiry_list_custom_gallery_images('gallery-post-single'); ?>
                                </div>
                                <?php
                                $size_thumb = 'gallery-post-single-thumb';
                                $gallery_images = rwmb_meta('MEDICAL_META_custom_gallery', 'type=plupload_image&size=' . $size_thumb, $post->ID);
                                if (!empty($gallery_images)) {
                                    ?>
                                    <div id="carousel" class="flexslider">
                                        <ul class="slides">
                                            <?php
                                            foreach ($gallery_images as $gallery_image) {
                                                $caption = (!empty($gallery_image['caption'])) ? $gallery_image['caption'] : $gallery_image['alt'];
                                                echo '<li>';
                                                echo '<img src="' . $gallery_image['url'] . '" alt="' . $gallery_image['title'] . '" />';
                                                echo '</li>';
                                            }
                                            ?>
                                        </ul>
                                    </div>
                                    <?php
                                }
                                ?>
                            </div>
                        </div>

这是该元素的CSS：

.gallery-single #carousel {
  position: absolute;
  bottom: -35px;
  display: block;
  width: 90%;
  margin: auto 33px;
  padding: 0 48px;
  border: none;
  background: none;
 }

This当前看起来是：

和t his（用户名/密码已登录）是外观需要：

有帮助吗？

Answer 1

要使功能区居中，请除去左右边距，它已经是绝对的了，因此您可以使用left的50％，然后进行变换以调整左边的位置

.gallery-single #carousel {
  position: absolute;
  bottom: -35px;
  display: block;
  width: 90%;
  margin: 0;
  padding: 0 48px;
  border: none;
  background: none;
  left: 50%;
  transform: translateX(-50%);
}

将FlexSlider导航栏正确放置在中央

1 个答案: