我想把我的作品集放在中间。我很难在不失去功能的情况下定心。当你点击项目或网站时,它会缩小照片的范围。每当我试图居中时,它就失去了这样做的能力。
有些元素是左浮动的[float: left
],我认为这会导致居中问题,但它需要左浮动才能发挥作用。有人知道我怎样才能在不失去缩小图片范围的情况下把它居中吗?我试过把它包装在一个div和使用text-align: center
和margin: 0 auto
,但没有运气。当我去掉所有的float: left
时,我能够将它居中,但它不起作用,它看起来扭曲了。
<ul id="filter">
<li class="current"><a href="#">All</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">websites</a></li>
</ul>
<div id="center_wrapper">
<ul id="gallery">
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
</ul>
</div>
css: .imgContainer {
width: 400px;
height: 400px;
float: left;
border: solid 1px #999;
}
img {
width: 100%;
height: 100%;
}
ul#filter {
float: left;
font-size: 16px;
list-style: none;
width: 100%;
}
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
ul#filter li.current a {
color: #333;
font-weight: bold;
}
ul#gallery {
list-style: none;
display: inline-block;
}
ul#gallery li {
float: left;
}
.center_wrapper {
text-align: center;
margin: 0 auto;
}
在父ul
:
ul {
font-size:0;
text-align:center;
}
在li元素上代替浮动:
li {
/*float:left;*/
display:inline-block;
font-size:16px;
}
http://codepen.io/nOji/pen/pJGxQE ul#gallery {
list-style: none;
display: inline-block;
padding-left:0;
padding-right:0;
text-align: center;
}
ul#gallery li {
display: inline-block;
}
有一个更好的方法。
你的HTML是你向世界展示的内容。它需要人类和计算机都能读懂。你也不应该在2015年使用CSS浮动进行布局。我们有无数更好的方法,例如flexbox或inline-block,它们使用起来要简单得多,而且更不容易出错。
* { margin:0; padding:0 }
body {
font-size: 16px;
padding: 1em;
text-align: center;
}
nav {
margin-bottom: 1em;
text-align: start;
}
nav a {
border-right: 1px solid #dedede;
margin-right: 10px;
padding-right: 10px;
}
nav a.current {
color: #333;
font-weight: bold;
}
section {
display: inline-block;
text-align: start;
width: 90%;
}
<nav>
<a href="#" class="current">All</a>
<a href="#">projects</a>
<a href="#">websites</a>
</nav>
<section id="gallery">
<a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="website"><img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="website"><img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
<a href="#" class="website"><img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
</section>