问将内容居中对齐
EN

Stack Overflow用户

提问于 2021-05-15 00:10:33

回答 1查看 17关注 0票数 1

如何在不添加填充的情况下将内容对齐到导航栏的中间位置？我不想增加背景。没有其他要添加的细节。谢谢。谢谢。谢谢。谢谢。谢谢。谢谢。谢谢。谢谢。谢谢。谢谢。谢谢。

    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }
    
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    
    nav ul li a {
        font-size: 26px;
        color: white;
    }
    
    ul {
        position: fixed;
        width: 100%;
        height: 50vh;
        background: #091624;
        top: auto;
        left: auto;
        text-align: center;
    }
    
    nav ul li {
        display: block;
        margin: 20px 0;
        line-height: normal;
    }
    
    a.content,
    a:hover {
        background: #1b9bff;
        transition: .5s;
    }
    
    @media screen and (min-width: 768px) {
        nav {
            height: 80px;
            width: 100%;
        }
        nav ul {
            position: fixed;
            float: right;
            margin-right: 40px;
            text-align: right;
            height: 60px;
        }
        nav ul li {
            display: inline-block;
            line-height: 80px;
            margin: 0 5px;
        }
        nav ul li a {
            color: white;
            font-size: 17px;
            padding: 7px 13px;
            border-radius: 3px;
        }
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/styles.css">
    <title>Responsive Navigation Bar</title>
</head>

<body>
    <nav>
        <ul class="content">
            <li><a href="#">About</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Learning Paths</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>

</html>

Image of live server

css

navigationbar

html

回答 1

Stack Overflow用户

发布于 2021-05-15 00:28:03

在用于更宽屏幕的CSS中，您需要删除右对齐：

    @media screen and (min-width: 768px) {
        nav {
            height: 80px;
            width: 100%;
        }
        nav ul {
            position: fixed;
            float: right;
            margin-right: 40px;
            /* REMOVE THIS LINE text-align: right; */
            height: 60px;
        }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67537478

复制

相似问题

问将内容居中对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将内容居中对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将内容居中对齐
EN