在设置导航栏是的问题，麻烦助教了

我没有用position使导航条元素垂直居中，改用line-height,但是这样写不行，是不是因为浮动的原因啊？麻烦助教了，解释下其中问题。另外如果要这么写，应该怎么修改呢？

麻烦了，谢谢~

.header {

width: 100%;

height: 60px;

line-height: 60px;

background: linear-gradient(rgba(105,105,105,1) 0% , rgba(105,105,105,0) 100%);

position: fixed;

z-index: 3;

top: 0;

left: 0;

}

.header__logo {

width: 150px;

height: 40px;

line-height: 40px;

background: url('../img/logo.png') no-repeat;

text-indent: 50px;

font-size: 18px;

font-weight: 800;

color: #ffffff;

margin-left: 10px;

float: left;

}

.header__nav {

height: 40px;

line-height: 40px;

margin-right: 30px;

float: right;

}

.header__nav-item {

display: block;

float: left;

font-size: 12px;

font-weight: 600;

color: #ffffff;

margin-left: 40px;

}

.header__nav-item_custom_button {

width: 96px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: #f01400;

border-radius: 4px;

}

慕田峪5928195 2017-04-29

源自：H5+CSS3+JS实现炫酷网页 5-6 作业题

收起

2回答

小于飞飞 2017-05-02 14:57:03

你好，根据代码情况分析，是想实现内容在一定范围内垂直居中吧：

注意，上面说到的代码，对单行文字起作用，并且在 height: 40px; 范围垂直居中。

height: 40px;
line-height: 40px;

所以代码要调整。因为这个导航的高是60px，所以 .header__nav和.header__logo 要设置为：

height: 60px;
line-height: 60px;

同时 .header__nav-item_custom_button 要添加 margin-top: 10px; 使其垂直居中。

希望对你有帮助，祝学习愉快。

收起回答

提问者慕田峪5928195 #1

谢谢助教。那么如果我不想把nav和logo的高度的话就只能用margin、padding、或者定位了吗？

2017-05-02 20:55:50
小于飞飞回复提问者慕田峪5928195 #2

可以使用margin、padding、或者定位来是实现，注意使用 margin、padding 要计算到值，使其居中

2017-05-02 21:25:57

小于飞飞 2017-04-29 21:35:31

你好，把相应的 html也传上来，根据整体代码，以便检测呦。只从 css 样式上看，考虑下面原因。

height: 40px;
line-height: 40px;

注意：这样设置使单行文字内容垂直居中，不是所有的内容都垂直居中。希望对你有帮助，祝学习愉快。

收起回答

提问者慕田峪5928195 #1

<header class="header"> <div class="header__wrap"> <div class="header__logo">H5实战页面</div> <nav class="header__nav"> <a href="javascript:;" class="header__nav-item header__nav-item_status_active">实战课程</a> <a href="javascript:;" class="header__nav-item">商业案例</a> <a href="javascript:;" class="header__nav-item">课程体系</a> <a href="javascript:;" class="header__nav-item">集成环境</a> <a href="javascript:;" class="header__nav-item">云端学习</a> <a href="javascript:;" class="header__nav-item header__nav-item_custom_button">即刻学习</a> </nav> </div> </header> 这是html,您的意思是说这样子设置只能让文字这些居中吗？不能让块状元素居中？麻烦了

2017-04-30 09:34:53
小于飞飞回复提问者慕田峪5928195 #2

你好，由于配图，看上面的回答呦。

2017-05-02 14:57:53