老师我设置的导航为什么不能居中。

来源:2-1 html5页面布局(表现层_header)

晚风142536

2020-01-20 09:40:25

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

*{

    padding: 0;

    margin: 0;

    border: none;

    font-size: 14px;

}

a{

    text-decoration: none;

}

header{

    background-color: black;

    height: 80px;

}

.container{

    width: 1200px;

    margin: 0 auto;

}

nav{

    float: right;

}

header > .container > a {

    display: block;

    float: left;

    margin: 5px 25px;

}

header > .container > nav > a{

    display:block;

    float: left;

    width: 100px;

    height: 73px;

    color: #ffffff;

    font-size: 24px;

    text-align: center;

</style>

</head>

<body>

    <header>

        <div class="container">

        <a href=""><img src="images/logo.png" alt="logo"/></a>

        <nav>

            <a href="">Home</a>

            <a href="">Course</a>

            <a href="">Actual</a>

            <a href="">Plan</a>

            <a href="">FAQ</a>

            <a href="">Notes</a>

        </nav>

        </div>

    </header>




写回答

1回答

好帮手慕粉

2020-01-20

同学你好,同学是说导航没有垂直局居中吗?如果是的话,我们可以利用行高等于高度的方法让单行文本垂直居中显示:

http://img.mukewang.com/climg/5e250b5909fbf3c006010451.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程