为了账号安全,请及时绑定邮箱和手机立即绑定

哪位大神帮我看看,头部感觉没垂直居中,可是我加line-height了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

* {

margin:0;

padding:0;

}

nav{

background-color:#999;

height:40px;

}

nav ul{

list-style:none;

}

nav ul li{

height:40px;

line-height:40px;

text-align:center;

float:right;

display:inline-block;

}

nav ul .logo{

float:left;

}

nav ul li a{

text-decoration:none;

margin:10px;

display:inline-block;

}

.banner{

height:500px;

background-color:#666;

}

.banner .inner{

max-width:250px;

margin:0 auto;

position:relative;

top:160px;

text-align:center;

}

.banner .inner button{

border:none;

color:#CCC;

background-color:#333;

padding:10px 20px;

font-size:16px;

}

.banner .inner p{

margin:10px auto;

line-height:25px;

}

.banner .inner .more{

margin-top:80px;

}



</style>

</head>


<body>

<header>

   <nav>

      <ul>

         <li class="logo"><a href="#">王小白</a></li>

         <li><a href="#">注册</a></li>

         <li><a href="#">联系</a></li>

         <li><a href="#">注册</a></li>

         <li><a href="#">登录</a></li>

      </ul>

   </nav>

   <div class="banner">

       <div class="inner">

           <h1>王小白</h1>

           <p>这是一个神奇的地方,在这里你将得到魔法,很神奇吧,快加入我们吧!</p>

           <button>了解我</button>

           <div class="more">更多</div>


       </div>

   </div>

</header><!--页眉-->

<div class="content"></div><!--内容-->

<footer></footer><!--页脚-->

</body>

</html>


正在回答

3 回答

头部没有垂直居中?你是指文字么?你加了margin:10px当然没法居中,去掉margin就好了

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

非常感谢!
2015-12-16 回复 有任何疑惑可以回复我~
#2

迷途的马尔斯 回复 xiao55555 提问者

^_^
2015-12-16 回复 有任何疑惑可以回复我~
#3

迷途的马尔斯 回复 xiao55555 提问者

没有啊,我加你之后显示对方把我删除了,我也看不懂诶(⊙﹏⊙)b
2015-12-16 回复 有任何疑惑可以回复我~
#4

xiao55555 提问者 回复 迷途的马尔斯

我是看到我没在你的好友列表中,还以为你没叫我呢
2015-12-16 回复 有任何疑惑可以回复我~
#5

迷途的马尔斯 回复 xiao55555 提问者

呵呵加了
2015-12-17 回复 有任何疑惑可以回复我~
#6

xiao55555 提问者 回复 迷途的马尔斯

不知道它这个什么情况?
2015-12-17 回复 有任何疑惑可以回复我~
#7

迷途的马尔斯 回复 xiao55555 提问者

bug,你也反馈一下吧,我已经反馈了
2015-12-17 回复 有任何疑惑可以回复我~
查看5条回复

你加了Margin 其实你可以打开调试工具看看就知道了

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

有看到你这个头像了,谢谢啊
2015-12-16 回复 有任何疑惑可以回复我~

把下面这些代码从nav  ul  li 里面剪切到nav  ul  li  a里面  ,再去掉nav  ul  li  a里面的margin:10px;

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


0 回复 有任何疑惑可以回复我~
#1

狂飙的蜗牛_1

写在nav ul li里只是对li里面的文字起作用的,但是li里面并没有文字,文字是在li里面的a标签里的
2015-12-15 回复 有任何疑惑可以回复我~
#2

xiao55555 提问者 回复 狂飙的蜗牛_1

明白了,谢谢
2015-12-16 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
HTML5和CSS3扁平化风格博客
  • 参与学习       86787    人
  • 解答问题       406    个

HTML5与CSS3搭建超酷扁平化风格博客

进入课程

哪位大神帮我看看,头部感觉没垂直居中,可是我加line-height了

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号