Question

我现在正在为一些网站解决这个问题。是时候公开询问了。

我有一个带有一些元素的导航栏。其中之一，徽标，需要保持中心。

我使用的是flexbox。是否有可能使用弹性规则实现这一点，而无需求助于绝对定位？这在小屏幕上对我来说永远不会有效，因为元素将开始相互叠加。

以下是Codepen，其中包含我的标题标记。

<header role="banner">
  <button>Button</button>

  <h1>
    <a href="/">
      <img class="logo" src="http://pre04.deviantart.net/239a/th/pre/i/2014/106/6/c/random_logo_by_criticl-d7eqdvw.png" alt="Logo">
    </a>
  </h1>

  <nav role="navigation">
    <ul class="primaryNav">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
    </ul>

    <ul class="secondaryNav">
      <li><a href="#"><svg viewBox="0 0 512 512"><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg></a></li>
      <li><a href="#"><svg viewBox="0 0 512 512"><path d="M179.7 237.6L179.7 284.2 256.7 284.2C253.6 304.2 233.4 342.9 179.7 342.9 133.4 342.9 95.6 304.4 95.6 257 95.6 209.6 133.4 171.1 179.7 171.1 206.1 171.1 223.7 182.4 233.8 192.1L270.6 156.6C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257 44 332.2 104.7 393 179.7 393 258 393 310 337.8 310 260.1 310 251.2 309 244.4 307.9 237.6L179.7 237.6 179.7 237.6ZM468 236.7L429.3 236.7 429.3 198 390.7 198 390.7 236.7 352 236.7 352 275.3 390.7 275.3 390.7 314 429.3 314 429.3 275.3 468 275.3"/></svg></a></li>
      <li><a href="#"><svg viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg></a></li>
    </ul>
  </nav>
</header>

Answer 1

您可以使用div包装横幅的三个部分，如下所示：

<header role="banner">
   <div class="banner-block">
      ...
   </div>
   <div class="banner-block">
      ...
   </div>
   <div class="banner-block">
      ...
   </div>
</header>

然后可以使用此CSS在横幅上均匀分布三个banner-block弹性项：

.banner-block {
   width: 33.333% ;
   flex: 1 0;
}

中间的h1徽标可以使用以下内容居中：

h1 {
   margin: 0 auto;
}

查看此更新的codepen

Flexbox徽标运行：在多元素导航中居中元素

1 个答案: