Правильно расположите панель навигации FlexSlider в центре

Question

Я работаю над небольшим проектом, и у меня есть странная проблема, которая не может решить сама.У меня есть гибкая галерея слайдеров, которая показывает изображения на ленте ниже основного центра изображения.Но по какой-то причине он показал, что лента не в центре, а левый и правый указатели не работают.Это код для этого элемента:

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

Этот сейчас выглядит :

и t его (пользователь / пароль для входа в систему) равен , как нужно выглядеть :

Любая помощь?

Answer 1

Чтобы отцентрировать ленту, удалите поле слева и справа, оно уже абсолютное, поэтому вы можете использовать левое значение на 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%);
}