Javascript 在html中将列表项图像与中心对齐
我正在学习响应式设计的web开发(仍然是一个noob),所以请轻松一点!我会尽可能彻底,但如果您需要更多信息,请让我知道Javascript 在html中将列表项图像与中心对齐,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在学习响应式设计的web开发(仍然是一个noob),所以请轻松一点!我会尽可能彻底,但如果您需要更多信息,请让我知道 因此,我正在尝试设计一个页面,该页面在图像上具有jquery悬停效果。你可能会认为我在JS中遇到了麻烦,但我的问题要简单得多,这让我非常沮丧。我希望我的图像在最左边对齐的同时居中对齐。图像框是li的,我尝试将它们添加到div中,并将div与中心对齐 请注意,我也需要它是响应,所以不能简单地添加边距或填充 以下是我的html正文: <body> <div cl
因此,我正在尝试设计一个页面,该页面在图像上具有jquery悬停效果。你可能会认为我在JS中遇到了麻烦,但我的问题要简单得多,这让我非常沮丧。我希望我的图像在最左边对齐的同时居中对齐。图像框是li的,我尝试将它们添加到div中,并将div与中心对齐 请注意,我也需要它是响应,所以不能简单地添加边距或填充 以下是我的html正文:
<body>
<div class="body">
<div> <img src="images/logo.png" class="image"></div>
<div class="imgs">
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/501695-Cornwall-Map">
<img src="images/9.jpg" />
<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir({
hoverDelay : 75
}); } );
});
</script>
</body>
-
-
$(函数(){
$('#da thumbs>li').each(function(){$(this.hoverdir({
悬停延迟:75
}); } );
});
这是我的CSS:
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
@keyframes colorChange {
0% {
background: #4BB4BF;
}
20% {
background: #306F7A;
}
40% {
background: #207DFF;
}
60% {
background: #1B98E0;
}
80% {
background: #7EA0E0;
}
100% {
background: #4BB4BF;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
.da-thumbs {
list-style: none;
width: 100%;
height: 100%;
position: relative;
margin: 20px auto;
padding: 0;
}
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: #333;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
.da-thumbs li a div span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
text-transform: uppercase;
font-weight: normal;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.5);
box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}
<!-- Demo content here -->
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* General Demo Style */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-weight: 400;
font-size: 15px;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
min-height: 750px;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.image {
max-width: 100%;
max-height: 100%;
background-size: cover;
}
.imgs {margin: 0 auto;
align: center;
}
.body{
宽度:100%;
高度:1000px;
动画名称:色彩变化;
动画持续时间:10秒;
动画迭代次数:无限;
文本对齐:居中;
}
@关键帧颜色更改{
0% {
背景:#4BB4BF;
}
20% {
背景#306F7A;
}
40% {
背景:#207DFF;
}
60% {
背景#1B98E0;
}
80% {
背景#7EA0E0;
}
100% {
背景:#4BB4BF;
}
}
.按钮{
填充:10px;
边缘顶端:40px;
字体大小:20px;
}
D.拇指{
列表样式:无;
宽度:100%;
身高:100%;
位置:相对位置;
保证金:20px自动;
填充:0;
}
李大拇指{
浮动:左;
保证金:5px;
背景:#fff;
填充:8px;
位置:相对位置;
盒影:0 1px 3px rgba(0,0,0,0.1);
}
达大拇指李a,
大卫大拇指,我是李安{
显示:块;
位置:相对位置;
}
达大拇指李a{
溢出:隐藏;
}
D.大拇指李a div{
位置:绝对位置;
背景:#333;
背景:rgba(75,75,75,0.7);
宽度:100%;
身高:100%;
}
da大拇指李a分区跨度{
显示:块;
填充:10px0;
利润率:40px20px20px20px;
文本转换:大写;
字体大小:正常;
颜色:rgba(255255,0.9);
文本阴影:1px1px1pRGBA(0,0,0,0.2);
边框底部:1px实心rgba(255255,0.5);
盒影:0 1px0 rgba(0,0,0,0.1),0-10px0 rgba(255255,0.3);
}
*,
*:之后,
*:之前{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
填充:0;
保证金:0;
}
/*Nicolas Gallagher的Clearfix黑客:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:之前,
.clearfix:之后{
内容:;/*1*/
显示:表格;/*2*/
}
.clearfix:之后{
明确:两者皆有;
}
.clearfix{
*缩放:1;
}
/*一般演示风格*/
身体{
字体系列:Cambria,Palatino,“Palatino Linotype”,“Palatino LT STD”,乔治亚州,衬线;
字体大小:400;
字体大小:15px;
}
a{
颜色:#555;
文字装饰:无;
}
.集装箱{
宽度:100%;
位置:相对位置;
最小高度:750px;
}
.clr{
明确:两者皆有;
填充:0;
身高:0;
保证金:0;
}
.形象{
最大宽度:100%;
最大高度:100%;
背景尺寸:封面;
}
.imgs{页边距:0自动;
对齐:居中;
}
请给出您对我如何调整这些元素的想法
提琴盒:
你不能:
margin-left: auto; margin-right: auto;
??这将是响应性的,它不是固定的边距。您编辑的代码:
.da-thumbs li {
display:inline-block;
width:46%;
margin: 5px;
padding: 8px;
position: relative;
}
.da-thumbs li img{
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
请点击此处:
一方面,您浮动了li,另一方面,您希望将框阴影添加到图像中,而不是li。原因是li将比图像大,因此长方体阴影将远离实际图像的边缘。随着屏幕缩小,图像将堆叠。您可能最终需要为图像提供此样式:
max-width:100%;
这样他们就不会在手机宽度处离开页面(我没有看图片的大小)。希望这对您有所帮助。您是否尝试将图像垂直对齐在中间,同时将其水平对齐到左侧?否,我希望将其水平对齐到左侧。它们应该是响应性的,因此如果屏幕宽度足够短,第二幅图像应该移到第一幅图像的下方。“我希望我的图像在与最左侧对齐时居中对齐。”那么你这是什么意思?我的意思是说,现在它们与最左侧对齐。我要他们在中间对齐!对不起,给你弄糊涂了:/你能把你的案子处理一下吗?嗨。在css中,如果您看到最后一个“imgs”类定义,您将看到我使用了margin:0 auto。它实现了您的解决方案,但不起作用。甚至尝试使用!重要的是要确保其他任何地方都没有其他属性凌驾于此:/I我认为这是因为imgs的父元素(li、ul或div)向左对齐,没有100%的宽度。你是对的。我在li元素中将一个浮动属性设置为left。删除它和图像对齐的中心!非常感谢祝你今天愉快。:)谢谢!这似乎奏效了。虽然我实际上没有使用你的css,因为我有一些悬停效果,而这些效果又必须改变才能工作。所以我简单地删除了float属性,这似乎是问题所在。当我将div与“imgs”属性的中心对齐时,删除它的效果很好!再次感谢你!如果你认为这个问题对其他人有帮助,请把它投上去。我会的!很高兴我能帮忙。如果你认为这对其他人也有帮助,请投票支持我的答案:)