Css 将NivoSlider的绝对定位导航条居中?(或使用边距:0自动技巧)?
我添加了我的Wordpress主题 在随文件提供的演示中,nivo ControlNav具有绝对位置,并向右移动 我想知道是否有一种方法可以使nivo ControlNav居中(甚至应该在Internet Explorer中居中) 首页.php:Css 将NivoSlider的绝对定位导航条居中?(或使用边距:0自动技巧)?,css,Css,我添加了我的Wordpress主题 在随文件提供的演示中,nivo ControlNav具有绝对位置,并向右移动 我想知道是否有一种方法可以使nivo ControlNav居中(甚至应该在Internet Explorer中居中) 首页.php: <div id="feature"> <div class="container"> <div id="slider-wrapper"> <div id="slider"> <?
<div id="feature">
<div class="container">
<div id="slider-wrapper">
<div id="slider">
<?php // Retrive custom post type with a custom taxonomy assigned to it
$posts = new WP_Query('post_type=page_content&page_sections=Slider (Front Page)&order=ASC') ?>
<?php while ( $posts->have_posts() ) : $posts->the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
<div class="shadow-slider">
<!-- Shadow at the bottom of the slider -->
</div>
</div>
</div><!-- .container -->
</div><!-- #featured -->
或者我应该只使用float:left;保证金:0自动代码>技巧
编辑:
#feature {
background: #333;
padding: 30px 0;
height: 400px;
}
#slider-wrapper {
float: left;
height: 500px;
}
#slider {
float: left;
border: 1px solid #DDD;
}
#slider {
position:relative;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top: 0px;
left: 0px;
display: none;
}
#slider a {
border: 0;
display: block;
}
.nivo-controlNav {
position: absolute;
left: 260px;
bottom: -42px;
width: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
.nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(images/bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.nivo-controlNav a.active {
background-position: 0 -22px;
}
.nivo-directionNav a {
display: block;
width: 30px;
height: 30px;
background: url(images/arrows.png) no-repeat;
text-indent: -9999px;
border: 0;
}
a.nivo-nextNav {
background-position: -30px 0;
right: 15px;
}
a.nivo-prevNav {
left: 15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
我决定这样做:
.nivo-controlNav {
margin: 0 auto;
overflow: hidden;
width: 200px;
}
.nivo-controlNav {
margin: 0 auto;
overflow: hidden;
width: 200px;
}
但是nivo controlNav div
内的链接未居中
有什么建议吗
.nivo-controlNav {
text-align:center;
left:0;
right:0;
}
.nivo-controlNav a {
display:inline-block; /* so float:none */
}
它将在所有理解内联块属性的浏览器上工作
它可以在所有理解内联块属性的浏览器上运行。我找到了解决方案,它适用于任何数量的图像,唯一不方便的是,您必须使用jQuery,但我想这不会是一个问题,因为Nivo已经可以使用jQuery^^。。。无论如何
根据先前发布的css代码:
.nivo-controlNav {
position: absolute;
left: 50%;
}
我可以想出这个javascript代码,稍后我会解释:
$(document).ready(function() {
$('#slider').nivoSlider();
var numberImages = $('#slider img').length;
var bulletWidth = 22;
var margin = - ( (numberImages * bulletWidth) / 2 );
$('.nivo-controlNav').css('margin-left', margin+'px');
});
这基本上意味着,我们不需要根据图像的数量为每个滑块的controlNav提供一个随机的左边距,而是要计算它,方法非常简单:
我们将controlNav的左边缘移动到50%(CSS)
接下来,我们必须知道整个controlNav的宽度,其中当然包含项目符号:
`numberImages * bulletWidth`
将所有这些除以2,然后将其从左边距中移除,这意味着:将controlNav向左移动其宽度的一半
希望它对您有用:)我找到了解决方案,它适用于任何数量的图像,唯一不方便的是您必须使用jQuery,但我想这不会是一个问题,因为Nivo已经可以使用jQuery^^^’。。。无论如何
根据先前发布的css代码:
.nivo-controlNav {
position: absolute;
left: 50%;
}
我可以想出这个javascript代码,稍后我会解释:
$(document).ready(function() {
$('#slider').nivoSlider();
var numberImages = $('#slider img').length;
var bulletWidth = 22;
var margin = - ( (numberImages * bulletWidth) / 2 );
$('.nivo-controlNav').css('margin-left', margin+'px');
});
这基本上意味着,我们不需要根据图像的数量为每个滑块的controlNav提供一个随机的左边距,而是要计算它,方法非常简单:
我们将controlNav的左边缘移动到50%(CSS)
接下来,我们必须知道整个controlNav的宽度,其中当然包含项目符号:
`numberImages * bulletWidth`
将所有这些除以2,然后将其从左边距中移除,这意味着:将controlNav向左移动其宽度的一半
希望它对您有用:)您是否正在寻找一种故障保护方法,以便在不考虑图片数量的情况下将导航项目符号居中?@kjy112没错。图片的数量可能会有所不同。我这样做的方式是手动更改.nivo controlNav中左侧的像素,但每次添加或删除图片时都必须更改它,因为这是一个静态修复。这是否有帮助。socialbar{位置:固定;底部:0;左侧:20%;高度:48px;宽度:60%;背景:#282828;颜色:白色;文本对齐:居中;}菜单您是否在寻找一种故障安全方法来居中导航项目,而不考虑图片数量?@kjy112没错。图片的数量可能会有所不同。我这样做的方式是手动更改.nivo controlNav中左侧的像素,但每次添加或删除图片时都必须更改它,因为这是一个静态修复。这是否有帮助。socialbar{位置:固定;底部:0;左侧:20%;高度:48px;宽度:60%;背景:#282828;颜色:白色;文本对齐:中间;}菜单