html - 无法在我的菜单中将文本居中

Question

嗨，我是编码新手，很难让我的菜单文本居中。请在这里查看:https://jsfiddle.net/64pu8axf/3/

<div id="nav-wrapper">
    <div id="nav">{menu}</div>
</div>

#nav-wrapper {
    position: fixed;
    width: 89.77%;
    left: 0 20;
    padding: 7px 0;
    top: 0px;
    z-index: 5 ;
    background: #B31717;

#nav {
    display: table-cell;
    vertical-align: center;
}

#nav > ul li {
    display: inline-block;
    list-style: none;
    padding: 0;
    z-index: 2;
}

Answer 1

将 text-align:center 添加到您的 #nav-wrapper 应该可以解决问题。

您还缺少 #nav-wrapper

的结束

看看here

HTML

<div id="nav-wrapper">
    <div id="nav">{menu}</div>
</div>

CSS

#nav-wrapper {
    position: fixed;
    width: 89.77%;
    left: 0 20;
    padding: 7px 0;
    top: 0px;
    z-index: 5 ;
    background: #B31717;
    text-align:center; /* <---- Note the change */
} /* <---- Added missing closing } */
#nav {
  display: table-cell;
  vertical-align: center;
}

#nav > ul li {
  display: inline-block;
    list-style: none;
    padding: 0;
    z-index: 2;
}

希望这对您有所帮助!