如何在导航栏的媒体查询中居中对齐/对齐菜单项？

Question

在我的第一个网站上工作，专注于苹果式的简约风格。这是我从几个来源学习后到目前为止开发的代码，并在这里提出了一个问题。我的最后一个问题是在移动视图中设置导航栏的样式(媒体查询处于活动状态(。现在我相信弹性显示(修复了我的第一个问题(会导致所有菜单项在移动视图中保持水平展开并单击栏图标。当菜单栏关闭时，目前它是完美的，徽标最终位于导航栏的中间。此时我唯一需要更改在"移动视图"中单击/展开栏图标时菜单项的格式，并确保在激活菜单时导航栏的背景正确扩展。

干杯

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.topnav a {
display: inline-flex;
color: #fff;
text-align: justify;
text-decoration: none;
font-size: 15px;
font-weight: lighter;
transition: 0.3s;
padding: 0;
margin: 5px 60px 5px 60px;
list-style-type: none;
}
.topnav a:hover {
color: #4286f4;
}
.active {
background-color: #333;
color: #4286f4;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 800px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: left;
display: flex;
position: absolute;
left: 0;
top: 9px;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {
position: static
}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 9px;
}
.topnav.responsive a {
float: left;
display: inline;
text-align: center;
line-height: 100px;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<a href="#"><img src="Images/DivinitalLogo.png" width="30" height="30"></a>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Answer 1

将此 CSS 类代码添加到媒体查询中。

小提琴：https://jsfiddle.net/2sfjmz4n/

.CSS：

@media screen and (max-width: 800px) {
.topnav{
flex-direction: column;
}
}

这将使 .topnav 中的项目在移动视图上对齐/居中