Html 如何创建中间带有徽标的独立菜单

编辑：在此处摆弄：

我正试图从一个模型设计中创建一个菜单，我最初在徽标的每一侧绘制了3个菜单项，但是我在用css执行这个想法时遇到了真正的麻烦

这个菜单是通过wordpress创建的，所以如果不使用自定义脚本，我就无法自定义html（我必须这样做才能让徽标显示在它显示的地方）。菜单必须是一个单一的菜单，所以我不能把它分成两个菜单，只是把标志之间等等

我试着使用

显示

表格

、

表格行

和

表格单元格

，但这与我想要实现的目标并不接近

它应该是这样的：

这就是我的尝试（有些不完整）的样子：

以下是我的尝试：

<div id="desktop-nav">
  <ul id="desktop-nav-menu" class="clearfix no-bullet">
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">Hem</li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">Aktiviteter</li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">Konferenser</li>
    <li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">Priser</li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">Om oss</li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">Kontakta oss</li>
  </ul>          
</div>

#desktop-nav {
  display: table;
  width: 100%;
}

#desktop-nav-menu {
  display: table-row;
}
#desktop-nav-menu .menu-item {
  display: table-cell;
  text-align: center;
}

.site-logo {
  min-width: 400px;
}
.site-logo > img {
  width: 400px;
  height: 146px;
  margin: -6px auto 0;
}

Aktiviter
Konferenser

Priser
Om oss
Kontakta oss

#桌面导航{
显示：表格；
宽度：100%；
}
#桌面导航菜单{
显示：表格行；
}
#桌面导航菜单。菜单项{
显示：表格单元格；
文本对齐：居中；
}
.网站标志{
最小宽度：400px；
}
.site logo>img{
宽度：400px；
高度：146px；
裕度：-6px自动0；
}

徽标的宽度必须最大为400px，但可以随大小的减小而缩放

<> P>我努力让标志出现在中间，同时制作<代码>。菜单项s占用尽可能多的空间，同时让它看起来是所需的方式。如果可能，我希望避免使用固定宽度的

。菜单项

，因为文本可能变长或变短

---

我只是觉得我尝试的方式有点笨重，所以我希望能得到一些帮助

这就是你要找的吗

Aktiviter
Konferenser

Priser
Om oss
Kontakta oss

#桌面导航{
显示：表格；
位置：绝对位置；
排名：0；
左：50%；
保证金权利：-50%；
转换：转换（-50%，0）；
文本对齐：居中；
}
#桌面导航菜单{
显示：表格行；
}
#桌面导航菜单。菜单项{
显示：表格单元格；
文本对齐：居中；
}
.现场标志{最小宽度：400px；
}
.site logo>img{
宽度：400px；
高度：146px；
裕度：-6px自动0；
}

首先，要垂直对齐菜单项。您几乎可以得到它，因为您已经将它们显示为表格单元格。但是你可以让它们漂浮起来。删除该选项并添加一个

垂直对齐：中间

#desktop-nav-menu .menu-item {
  display: table-cell;
  /*float: left;*/
  vertical-align: middle;
  text-align: center;
}

您还将看到菜单与屏幕一样宽。您可能希望将其缩小，在
#桌面导航
中添加一个宽度，并添加一个
边距：0 auto
，使其在页面上居中：

#desktop-nav {
  width: 850px;
  margin: 0 auto;
  max-height: 140px;
}

不要使用
显示表格、表格行和表格单元格

改用
float
。它使设计更加灵活

添加边框以供参考

看看这是否适合你

#desktop-nav {
  display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    text-align:center;
  border:1px solid red;
  overflow:hidden;
}

#desktop-nav-menu {
  display: inline-block;
  border:1px solid green;
  padding:0px;
}
#desktop-nav-menu .menu-item {
  float:left;
  width:auto;
  text-align: center;
  list-style:none;
  height: 146px;
   line-height: 146px;
  border:1px solid blue;
}

.site-logo {min-width:400px;
  height: 146px;
  border:1px solid red !important;
}
.site-logo > img {
  width: 400px;

  border:1px solid red ;
}

据我所知，你的问题，标志不是一个实际的菜单元素，但造型的一部分。基于此假设，您应该删除该行

<li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>

缺点是这只能在一行上工作。
您使用的是LESS还是SASS？@Curt我使用的是sasswave您尝试在徽标上设置
垂直对齐：中间
？说真的，只需发布编译后的CSS即可。这不是Sass的问题。@cimmanon我从来没有说过Sass是问题所在。这基本上看起来像编译后的CSS。。。我需要知道哪些属性要放在哪里。它是有效的，但我不能在使用它时为项目添加边距。需要在em之间创建一些空间，这样我就可以像我包含的图像一样获得它。好的，只需添加
li{padding:15px；}
！！：）不管我做什么，最后一项都会跳下来。如果我设置了一个特定的宽度，那么它就不再居中了。不幸的是，这里所有的答案都一样。最后一项？我不知道你的意思；这对我来说很好，你能发布一张图片吗？通过添加一个不可见的边框而不是填充来解决这个问题。
#desktop-nav-menu {
    background: url(logo.png) no-repeat 100px 0
}

#desktop-nav-menu .menu-item {
    position: relative;
    left: 100px;
}

#desktop-nav-menu .menu-item:nth-child(1),
#desktop-nav-menu .menu-item:nth-child(2),
#desktop-nav-menu .menu-item:nth-child(3) {
    left: 0px;
}