我正在尝试将整个网页居中，但它不允许我

对于我的网页，我想要三个内联图像，下面是我的徽标，下面是一个水平菜单，仅此而已，但它不会让我将其全部居中。谁能帮我？这是我的代码：

* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">News</a></li>
<li><a href="formation.html">Formations</a></li>
<li><a href="inthenews.html">Revue de Presse</a></li>
</ul>
</div>
</div>
</body>
</html>

重申一下，我想做的是在顶部中心放置三张对齐的图像(每张图像为 320px(。下面，试图拥有我的徽标。在它的正下方，有一个小菜单。

没什么好看的，真的。感谢您的阅读。

只需将justify-content:center;添加到.row类中即可。请参阅下面的工作示例

* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
justify-content:center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
justify-content:center;
display: flex;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">News</a></li>
<li><a href="formation.html">Formations</a></li>
<li><a href="inthenews.html">Revue de Presse</a></li>
</ul>
</div>
</div>
</body>
</html>

我从你的 css 代码中更改了几行：

从列类中删除了最大宽度属性。
删除了显示：块;来自 li a 类。
修改了 ul 和 li 样式，自定义 id="水平列表"。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width: 100%;" />
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor" />
</div>
<div class="menu">
<ul id="horizontal-list">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">News</a></li>
<li><a href="formation.html">Formations</a></li>
<li><a href="inthenews.html">Revue de Presse</a></li>
</ul>
</div>
</div>
</body>
</html>

* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
li a {
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
#horizontal-list li {
display: inline;
}
.menu {
display: table; /* Allow the centering to work */
margin: 0 auto;
}

希望这对你有帮助。

相关内容

最新更新

热门标签：