我正在做一个小项目,有一个奇怪的问题无法解决自己。我有一个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(用户名/密码已登录)是外观需要:
有帮助吗?
答案 0 :(得分: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%);
}