Question

我正在创建一个导航栏，其中有一个徽标和两个用作链接的按钮。当按钮中的文本具有相同的长度时，在所有这三个元素上使用justify-content: center;做我想要的，这意味着它将徽标放在中心，另外两个放在每一侧（我应用一些边距到徽标可以将它们分开，甚至两边都有边距。当按钮中的文本长度不同时，它会成为一个问题。边缘不仅没有以正确的方式放置元素，徽标也不再居中（即使我删除了边距，徽标也不再居中）。为了给你一个Bootstrap示例，我希望这些对象在bootstrap中使用类似于justify-content-around的东西。我该怎么办？

<div class="header">
<button class="activePage"><a href="map.html">Home</a></button>
<img src="logo.png" height="100px">
<button><a href="colorgame.html" target="_blank">Color Game</a></button>
</div>

.header{
        display: flex;
        justify-content: center;
        height: 50px;
        margin-bottom: 50px;
        background: blue;
    }

    .header img{
        margin-left: 10%;
        margin-right: 10%;
    }

这就是它的样子。查看底部徽标，您可以清楚地看到导航栏徽标未居中。 How it looks

编辑：通过查看它在Bootstrap中的工作方式来管理它。这很简单，你只需要将一些属性应用到

ul{
        list-style-type: none;
        display: flex;
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;

}

Answer 1

没有代码示例，这是我可以从您的描述中拼凑出来的最好的。这对你的目标有帮助吗？

＆＃13;

ul {
  background-color: #FDD;
  padding: 10px;
  width: 80%;
  margin: auto;
  list-style-type: none;
  
  
  display: flex;
  justify-content: center;
}

ul li {
  background-color: #DFD;
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  text-align: center;
  vertical-align: middle;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#"><img src="logo.jpg" width="100" height="100"></a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">Long Link</a></li>
    <li><a href="#"><img src="logo.jpg" width="100" height="100"></a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

你可能有类似的东西：

<div>
    <img src="https://cdn.hasselblad.com/dd31675c3502ea1d45f69a100d96e4b4ead306a7_b9403385_thumb.jpg">
    <nav>
        <a>Lorem ipsum</a>
        <a>dolor</a>
        <a>sit amet</a>
    </nav>
</div>

徽标图像后跟一定数量的锚点（或按钮，无关紧要）。问题在于即使你可以使徽标和导航元素在一个共同的中心轴上水平对齐，由于其文本内容，锚点不具有相同宽度的令人烦恼的事实，使得视觉印象是徽标和锚点并不是真正的中心。

让我们假设下面的CSS只是为了说明它通常会是什么样子：

a {
    outline: 1px dotted red; /* Just so that we can see the span of each box. */
    text-align: center; /* We want every anchor's text centered within its box. */
}
img {
    /* Make the logo image a block element so we can have it centered using equal margins on either side. */
    display: block;
    margin: auto;
}

您可以使用针对div元素的CSS Flex框模型居中导航栏，或者使用导航栏上的width: fit-content和margin: auto，这对于溶液：

div {
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* OR */

nav {
    margin: auto;
    width: fit-content; /* Or `-moz-fit-content` if the former isn't supported */
}

然后我们有：

您可以看到图像左侧和右侧的水平空间是相同的，但由于锚点的宽度不同，事情看起来有点“关闭”。

使用CSS网格框模型的解决方案

我知道解决此问题的一个更优雅的方法是在CSS中使用网格框模型，使您的nav元素成为网格框：

nav {
    display: grid;
    grid-auto-columns: 1fr; /* Every column occupies fairly distributed (between siblings) amount of free space. */
    grid-auto-flow: column;
}

这给了我们：

显然，您甚至可以制作并且可能更喜欢与图像宽度相同的导航栏，有几种方法可以做到这一点，我可能会将width元素的div设置为{{ 1}}。并非每个用户代理都支持，例如Firefox支持fit-content，这是该值的前缀版本。

在div中传播对象，其中一个使用flex居中

2 个答案:

使用CSS网格框模型的解决方案