如何在不失去它的功能的情况下居中
How to center without losing it's function
我想把我的作品集放在中间。我很难在不失去功能的情况下定心。当你点击项目或网站时,它会缩小照片的范围。每当我试图居中时,它就失去了这样做的能力。
有些元素是左浮动的[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>
相关文章:
- 对于如何在没有modernizr的情况下用边界半径的功能检测检查来替换我的旧浏览器检查
- 如何在应用切换点击功能之前,默认情况下在页面加载时隐藏带有特定类的ul-li
- 如何在启用ES6功能的情况下运行Node.js应用程序
- 在以下情况下,如何使用AJAX实现删除功能
- 只有在前一个功能成功完成的情况下,我才能正确地启动此功能
- Wordpress admin-ajax.php 在没有处理功能的情况下正在消亡“0”
- 多次点击功能在不重新加载页面的情况下不起作用
- 如何在以下情况下使隐藏/显示功能顺利进行
- 在不使用按钮的情况下显示列表,带有挖空功能
- 如何在不单击按钮的情况下执行此功能
- 在不设置参数的情况下,此功能如何工作
- 如何在没有任何html5功能的情况下通过javascript播放mp3文件
- 我们可以在不编写filteredMessages函数的情况下获得相同的功能
- 在不加载页面的情况下保留后退按钮功能
- 如何在不失去原有功能的情况下扩展JavaScript中的Object
- 如何在不移动过滤功能的情况下将一组过滤后的数据移动到另一个工作表
- 如何在没有用户注册的情况下实现保存到Lightbox功能
- 传单.绘制映射:如何在没有工具栏的情况下启动绘制功能
- 如何在不失去它的功能的情况下居中
- 在安装了Opera Mini的功能手机上,可以在不使用javascript的情况下选择要上传的文件来触发UI更改