Question

我试图集中我的投资组合库。我在没有失去它的功能的情况下难以集中它。当您点击任一项目或网站时，它将缩小照片范围。每当我试图使它居中时，它就失去了做到这一点的能力。

有些元素是左侧[float: left]浮动的，我认为这会导致居中问题，但需要向左浮动才能运行。有没有人知道我怎么能在不失去它的同时缩小图片的能力？我已尝试将其包装在div中并使用text-align: center和margin: 0 auto，但没有运气。当我摆脱所有float: left时，我能够集中它，但它没有工作，看起来很扭曲。

Html：

<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;
}

Answer 1

在父ul上：

ul {
    font-size:0;
    text-align:center;
}

在li元素上而不是浮动：

li {
    /*float:left;*/
    display:inline-block;
    font-size:16px;
}

http://codepen.io/nOji/pen/pJGxQE

Answer 2

ul#gallery {
  list-style: none;
  display: inline-block;
  padding-left:0;
  padding-right:0;
  text-align: center;
}

ul#gallery li {
  display: inline-block;
}

Answer 3

这是解决此问题的更好方法。

您的HTML是您向世界传播的内容。它需要是人类和计算机可读的。你也不应该在2015年使用CSS浮动进行布局。我们有很多更好的方法，例如flexbox或inline-block，它们使用起来更简单，更容易出错。

＆＃13;

* { 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%;
}

＆＃13;

<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>

＆＃13;

如何居中而不失去它的功能

3 个答案: