左边LOGO和标题用lineheight 不能使文字居中

来源:5-6 作业题

钟大白

2019-07-15 13:35:44

nav{width: 100%;
	height: 50px;
	position: absolute;
	line-height: 50px;
}
.nav-logo{
	display:inline-block;
	position: absolute;
	left: 0;
	line-height: 50px;
}
.nav-li{
	position: absolute;
	right: 0;
	line-height: 50px;
}
.nav-li .nav-ul li a{
	line-height: 50px;
	color: white
}
.banner img{
	width: 100%;
	height: 637px
}
<nav>
			<div class="nav-logo">
				<img src="img/logo.png" alt="">
				<span>H5实战页面</span>
			</div>
			<div class="nav-li">
				<ul class="nav-ul">
					<li><a href="#1">实战课程</a></li>
					<li><a href="#2">商业案例</a></li>
					<li><a href="#3">课程体系</a></li>
					<li><a href="#4">集成环境</a></li>
					<li><a href="#5">云端学习</a></li>
					<li class="nav-li-end"><a href="#">即刻学习</a></li>
				</ul>
			</div>
		</nav>


写回答

1回答

好帮手慕糖

2019-07-15

同学你好,1、使用通配符去除元素的内外边距,例:

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

2、右侧的li是呈垂直排列的,应该先给li设置浮动,使其显示在一行。当前li的文字谁垂直的哦,不过样式还需要在调整,比如去掉下划线等。

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

3、左右两部分的内容,不需要设置定位,使用浮动即可,例:

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

4、图片实现水平居中要结合vertical-align: middle;一起使用。因为图片与文字统一父级,文字也会受到影响,需要给文字呀添加vertical-align: middle;属性。

另,图片本身有点间距,可以给其父级设置font-size为0去掉。不过之后,需要单独设置下span的字体大小哦,例:

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

希望能帮助到你,欢迎采纳。

祝学习愉快!

0

0 学习 · 40143 问题

查看课程