Выровненные по центру пункты меню

Question

Мне нужно разработать адаптивное меню, в котором есть заголовок и пункты меню.

Пункты меню должны быть

• По центру экрана.
• Но следует также выровнять по левому краю.

Выровнять заголовок и левый край меню.

Как показано ниже.

Как добиться того же самого только в 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;
}