以 h2 标题居中 ul 列表

Question

我试图将一个 ul 列表居中，上面有一个 h2 标题，但我做不到。

我希望“.navig”的所有元素都位于每个 h2 标题下方。

似乎是要点问题，因为我想删除它们。

如有任何帮助，我们将不胜感激。

body{
    margin: 0;
    padding: 0;
    font-family: 'BenchNine', sans-serif;
    font-size: 120%;
}

header{
    -webkit-box-shadow: 0px 5px 9px 0px rgba(143,143,143,1);
    -moz-box-shadow: 0px 5px 9px 0px rgba(143,143,143,1);
    box-shadow: 0px 5px 9px 0px rgba(143,143,143,1);
}

.navig {
    text-align:left;
    list-style: none;
    padding-left: 180px;
}

#menu{
   text-align: center; 
  
}
#menu div{
    display: table-cell; 
    width: 10%;
}

h1, h2, h3, h4, h5{
    font-family: 'Amatic SC', cursive;
}

h1 {
text-align:center;
}

<!DOCTYPE html>
<head>
 <link rel="stylesheet" href="style.css">
 <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"/>
 <link href="https://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet"/>
</head>
<body>
 <!-- En-tête -->
 <header>
  
  <h1>Accueil</h1>
  <!-- Menu de navigation -->
   <div id="menu">
    <div>
     <h2>Recettes salées</h2>
     <ul class="navig">
      <li><a href="recettes_salees/omelette.html">Omelette au tofu</a></li>
      <li><a href="recettes_salees/feuilletes.html">Feuilletés maison</a></li>
      <li><a href="recettes_salees/aubergines.html">Aubergines au four</a></li>
     </ul>
    </div>
    <div>
     <h2>Recettes sucrées</h2>
     <ul class="navig">
      <li><a href="recettes_sucrees/tarte.html">Tarte fraise / chocolat</a></li>
      <li><a href="recettes_sucrees/daifuku.html">Daifukus ou mochis</a></li>
     </ul>
    </div>
    <div>
     <h2>Lifestyle</h2>
     <ul class="navig">
      <li><a href="#">Tutos beauté</a></li>
      <li><a href="#">Bons plans</a></li>
     </ul>
    </div> 
   </div>
 </header>

JSFiddle : https://jsfiddle.net/dd4s0tqL/

图片：https://puu.sh/wR3cj/e680f8a7a9.png

Answer 1

您需要从 ul 中删除填充并将 text-align 属性赋予 li，如下所示

.navig {
    text-align: left;
    list-style: none;
    padding-left: 0px;
}

.navig li {
   text-align: center;
}

这是给你的fiddle

编辑：

对于等于，您需要对当前样式规则进行以下更改：

#menu{
   text-align: center;
   display: flex;

}

#menu div{
    display: table-cell; 
    width: 35%;
}

这是更新后的 fiddle

以 h2 标题居中 ul 列表

Center ul list with a h2 title

html

css

title

h2

html-lists