css - 将 FlexSlider 导航栏正确定位在中心

Question

我在做一个小元素，遇到了一个我自己无法解决的奇怪问题。我有一个 flex slider gallery，将图像显示在主中心图像下方的色带中。但出于某种原因，它显示功能区未居中，左右指针不起作用。这是该元素的代码:

<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 (user/password is login) 需要怎么看:

有什么帮助吗？

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%);
}