Html 链接未在固定导航中居中_Html_Css

Html 链接未在固定导航中居中

html css

Html 链接未在固定导航中居中,html,css,Html,Css,我希望我的导航链接位于我尝试设置的固定导航栏的中心添加填充，但导航会以某种方式扩展。我也试着垂直对齐，但没什么效果。我对CSS真的很陌生，所以如果这种情况再次发生，解释会很有帮助 HTML 我会使用display:flex。这让事情变得很容易。使用对齐项目：居中垂直居中和对齐内容：之间的间距将徽标与导航分开。然后，我也会让你的导航li向左浮动，这样它们就正常了。您也可以在那里使用flex，但这不是必需的正文{ 字体系列：Arial、Helvetica、无衬线字体；字体大小：16px；保

我希望我的导航链接位于我尝试设置的固定导航栏的中心添加填充，但导航会以某种方式扩展。我也试着垂直对齐，但没什么效果。我对CSS真的很陌生，所以如果这种情况再次发生，解释会很有帮助

HTML

我会使用

display:flex

。这让事情变得很容易。使用

对齐项目：居中

垂直居中和对齐内容：之间的间距将徽标与导航分开。然后，我也会让你的导航

li

向左浮动，这样它们就正常了。您也可以在那里使用

flex

，但这不是必需的

正文{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
保证金：0；
填充：0；
}
p{
保证金：0；
填充：0；
}
.集装箱{
宽度：80%；
保证金：自动；
溢出：隐藏
}
标题{
背景色：#191919；
位置：固定；
宽度：100%；
颜色：#edf9ff；
最小高度：70px；
边框底部：#0fe216 3px实心；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
标题a{
文字装饰：无；
文本转换：大写；
}
标题ul{
保证金：0；
}
头李{
列表样式类型：无；
浮动：左；
文本对齐：居中；
右边填充：20px；
}
导航{
文本对齐：居中；
}


摄影之家
摄影






摄影
我们的照片总是以尽可能高的质量精心呈现

阿斯达斯达
摄影
我们的摄影师总能找到完美的照片，无论它是一个简单的点击完整的视频
保证！
如果您对我们的工作不满意，您将获得80%的退款
时间管理
时间管理是至关重要的一步，因此我们总是尽最大努力快速完成工作，但这是肯定的
请注意，任何版权和副本；保留

你想让它们垂直居中吗？是的，我想让它垂直居中

`<html>
<html>
    <head>
        <title>Photography | Home </title>
        <link href="app.css" rel="stylesheet"/>
        <script type="application/javascript" src="on.js"></script>
    </head>
    <body>

        <header>
            <div id="branding">
                <h2>PHOTOGRAPHY</h2>
            </div>
            <nav id="links">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">PHOTO GALLERY</a></li>
                <li><a href="#">VIDEO GALLERY</a></li>
            </ul>
                </nav>
        </header>
        <section id="showcase">
            <div class="container">
            <h2>Photography</h2>
            <p>Our photo's are always presente in the best
                quality possible with carefulness
            </p>
            </div>
        </section>
        <section class="boxes">
            <div class="container">
                <div class="box">asdasdsada
                    <img src="./images/CameraIcon.png">
                    <h2>Photography</h2>
                    <p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
                </div>
                      <div class="box">
                            <img src="./images/CommunityICON.jpg">
                            <h2>Guranteed!</h2>
                            <p>If you are not satisfied with our work you will have an 80% refund</p>


                </div>
                      <div class="box">
                            <img src="./images/TimeIcon.png">
                            <h2>Time Managment</h2>
                            <p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>

                </div>
            </div>
        </section>
        <footer>
            <p>Note that any copyright &copy; is reserved</p>
        </footer>
    </body>
</html>`

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
.container {
    width: 80%;
    margin: auto;
    overflow: hidden
}
header {
    background-color: #191919;
    position: fixed;
    width: 100%;
    color: #edf9ff;
    min-height: 70px;
    border-bottom: #0fe216 3px solid;
    padding-top: 30px;
}
header a {
    text-decoration: none;
    text-transform: uppercase;
}
header ul {
    margin: 0;
}
header li {
    list-style-type: none;
    float:right;
    text-align: center;
    padding-right: 20px;
}
nav {
    text-align: center;
}