将列表项图像对齐到html中居中 [英] Align list item images to center in html
问题描述
我正在使用响应式设计（仍然是一个noob）学习网络开发，所以请轻松！我会尽量尽可能彻底，但请让我知道，如果你需要更多的信息！
I'm learning web development with responsive design(still a noob) so please go easy! I will try to be as thorough as possible but please let me know if you need more information!
所以我试图设计一个页面，它对图片有jquery悬停效果。你会认为我在JS有麻烦，但我的问题是更简单，这使得它像地狱沮丧。我想让我的图像在中心对齐，当它们对齐到最左边。图像框是li的，我试图将它们添加到一个div和对齐的div到中心。
So I'm trying to design a page which has jquery hover effects on images. You would think I'm having trouble in the JS but my problem is much simpler which makes it frustrating like hell. I want my images to align in the center while they're aligned to the extreme left. the image boxes are li's and I've tried to add them to a div and align the div to the center.
请注意，我还需要它具有响应性，因此不能简单地添加边距或填充。
Please note that I also need it to be responsive so can't simply add a margin or padding.
以下是我的html正文：
Following is my html body:
<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>
这是我的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;
}
请告诉我如何对齐这些元素？
Please give your thoughts on how I can align these elements?
小提琴：
https：// jsfiddle.net/eqyfm41r/3/
推荐答案
您编辑的代码：
.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);
}
JSFiddle这里： https://jsfiddle.net/1zq95tzp/
JSFiddle here: https://jsfiddle.net/1zq95tzp/
你是浮动李的一件事，你也想添加框阴影到图像，而不是li。这样做的原因是李将要大于图像，因此箱阴影将出现在远离实际图像的边缘。随着屏幕缩小，图像将堆叠。您可能需要最终为图片提供此样式：
You were floating the li's for one thing, also you want to add the box shadows to the images, not the li. The reason for this is that the li is going to be larger than the image, so the box shadow will appear far away from the edges of the actual image. As the screen shrinks, the images will stack. You may need to eventually give the images this styling:
max-width:100%;
，这样他们就不会在手机宽度下离开页面（我没有看图像的大小）。希望这有助于你。
so that they don't go off the page at phone width (I didn't look at the size of the images). Hope this helps you.
这篇关于将列表项图像对齐到html中居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
