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

Question

在我的第一个网站上致力于苹果风格的简约风格。 这是我从几个来源学习到这里的问题后到目前为止开发的代码。 我的最后一个问题是在移动视图中对NavBar进行样式设置（媒体查询处于活动状态）。 现在，我相信在移动视图中，单击弹性图标时（它已解决了我的第一个问题）使所有菜单项保持水平展开，并且单击了条形图标。 当菜单栏关闭时，当前是完美的，徽标结束于NavBar的中间。 在这点上，我唯一需要更改的是在“移动视图”中单击/展开条形图标时如何格式化菜单项，并确保在激活菜单时导航栏的背景正确展开。

干杯

 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类代码添加到您的媒体查询中。

JsFiddle： https ：//jsfiddle.net/2sfjmz4n/

CSS：

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

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