Question

我正试图将一个带有h2标题的ul列表居中，但我不能这样做。

我希望“.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/

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

中心ul列表，带有h2标题

1 个答案: