Question

看看这个虚拟代码：http://jsbin.com/nabis/1/edit?html,css,output

我想要的是＆＃39; home＆＃39; -item位于页面的中心。

这可以通过Flexbox完成吗？或者其他什么CSS（非flexbox）解决方案会让我在那里？

这是HTML：

<ul class="nav">
  <li class="nav__item"><a href="#">very long navitem 1</a></li>
  <li class="nav__item"><a href="#">very long navitem 2</a></li>
  <li class="nav__item nav__item--home"><a href="#"></a></li>
  <li class="nav__item"><a href="#">navitem 3</a></li>
  <li class="nav__item"><a href="#">navitem 4</a></li>
</ul>

这是CSS：

.nav {
  display: flex; justify-content:center;align-items:center;list-style:none none;  margin:0; padding:0;
}

.nav__item {
  padding: 0 10px;

}

.nav__item--home a {
   display:block;
   width: 75px; 
  height:75px;
  background:url(http://dummyimage.com/75x75/000/fff&text=home) no-repeat 0 0;

}

以下是我想要实现的目标示例：example image

Answer 1

这一小段代码将完美地集中在其中：

.nav__item--home {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

在这里演示：http://jsbin.com/quwaqowa/1/edit

Answer 2

如何给出导航：宽度：100％;

然后到每个元素20％和text-align：center;

有5个元素，所以一切都会正常工作。

Answer 3

我知道这是一个相当古老的问题，您可能已经找到了解决方案，因为您与示例中的代码非常接近！

要实现您所寻找的结果，您只需为nav__item提供一个足够大的初始宽度，以包含very long navitem。

如果您对示例进行了以下添加，则nav__item--home将居中。

.nav__item { padding: 0 10px; width: 100px; }

您正指示nav__items 尝试为100px但如果不能，则分配他们之间的任何水平空间（正面或负面）

等量nav__items占nav__item--home两侧的等量空间。由此我们可以假设在中间项目的任一侧占据的空间将是相同的，因此推导出nav__item--home（作为中间项目）必须位于中心。

使用flexbox进行高级定心（...或不使用flexbox）

3 个答案: