中心左对齐的菜单项

Question

我必须开发一个响应式菜单，其中有一个HEADER和菜单项。

菜单项应为

• 以屏幕为中心。
• 但也应保持对齐。

HEADER和菜单的左边缘应对齐。

如下图所示。

如何在CSS中最好地实现相同的目标？

Answer 1

不确定我是否错过了这里的伎俩，但是这样的话？

JSFiddle

调整宽度/填充值以适应，但这似乎与链接的图像相似

<强> HTML

<div class="menuDiv">
    <table class="menuTable">
        <tr><td>Partner With Us</td></tr>
        <tr><td>Quick Requests</td></tr>
        <tr><td>Do It Yourself</td></tr>
        <tr><td>Creative Lab</td></tr>
        <tr><td>Your Projects</td></tr>
    </table>
</div>

<强> CSS

.menuTable{
  background: #25A;
  width: 40%;
  margin: 0 auto;
}
.menuTable td {
  border-bottom: white solid 1px;
  padding: 0.7em 2em;
  color: white
}
.menuDiv{
  width: 60%;
  background:#BBB;
  margin: 0 auto;
}