请老师帮看一下如何实现导航栏水平居中

首页课程实战体系课手记专栏慕课教程

请老师帮看一下如何实现导航栏水平居中

来源：2-4 编程练习

慕数据2005548

2020-07-10 07:04:22

<!DOCTYPE html>

<html>

<head>

*{margin:0;padding:0;}

.nav{background:black;

width:1100px;

height:100px;

position:absolute;

left:50%;

top:50%;

margin-left:-550px;

margin-top:-50px;

color: #fff;

text-align: center;

}

.nav-left{float:left;}

img{width: 200px;

height: 100px;

}

.nav-right {margin:0 auto;

line-height: 70px;

margin-left: 50%;

}

.nav-right ul{float: right;}

.nav-right ul li{list-style: none;

float:left;

margin: 15px;

}

a{text-decoration: none;color: #fff;}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

</body>

</html>

写回答

1回答

好帮手慕粉

2020-07-10

同学你好，关于同学的问题回答如下：

1、logo图超出了父容器：

这是因为图片是内联样式，底部自带默认间隙。可以设置为块级元素清除：

2、右侧的导航项部分，不建议同学使用margin值来实现垂直居中显示，这样是很难计算准确的。只使用行高就可以了：

3、同学已经实现了导航条整体水平垂直居中了呀：

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

0 学习 · 40143 问题

查看课程

相似问题

老师请帮我看一下作业

回答 1

请老师看一下我这个实现办法对么

回答 1

请检查，thanks

回答 2

2-7老师帮我看看

回答 2

怎么设置页脚的水平居中

回答 1

打开慕课网App查看更多内容