请问文字不能居中显示的原因

请问文字不能居中显示的原因

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>homeword</title>
 <link rel="stylesheet" type="text/css" href="..\\css.css\\homeword.css">
</head>
<body>
 <!-- 页面头部 -->
 <div class="header">
  <div class="logo"><img src="..\\picture.png\\images\\logo.png" alt="LOGO"></div>
  <div class="list">
   <ul>
    <li>HOME</li>
    <li>ABOUT</li>
    <li>GALAERY</li>
    <li>FACULTY</li>
    <li>EVENTS</li>
    <li>CONTACT</li>
   </ul>
  </div>
  <div class="clear"></div>
 </div>
 <!-- 页面banner区 -->
 <div class="banner"><img src="..\\picture.png\\images\\banner3.jpg"></div>
 <!-- 遮罩层 -->
 <div class="toplayer"></div>
 <!-- 表单层 -->
 <div class="bdc"><form>
  <input type="text" name="" placeholder="your Name">
  <br>
  <br>
  <input type="text" name="" placeholder="your Phone">
  <br>
  <br>
  <input type="email" name="" placeholder="your Email">
  <br>
  <br>
  <input type="textarea" name="" placeholder="Write Your Comment Here" id="textarea">
  <br>
  <button>SEND MESSAGE</button>
 </form></div>
 <!-- 页面about区 -->
 <div class="about">
  <div class="head">
   <div class="title">ABOUT</div>
   <hr>
  <div class="wenzi">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standerd dummy text ever since the 1500s</div>
   <div><img src="..\\picture.png\\images\\bb3.jpg"></div>

   <div class="num">
    <div class="num1"></div>
    <div class="num2"></div>
   </div>
  </div>
  <div class="foot"></div>
 <!-- </div> -->
 <!-- 页面gallery区 -->
 <div class="gallery"></div>
 <!-- 页脚区 -->
 <div class="footer"></div>
</body>
</html>

*{
 margin: 0;
 padding: 0;
 font-family: Microsoft YaHei UI;
}
.header{
 width: 100%;
 height: 100px;
 background-color:#07cbc9;
 /*position: fixed;
 top: 0;
 left: 0;*/
}
.header .logo{
 float: left;
}
.header .list{
 float: right;
}
.clear{
 clear: both;
}
.header .logo img{
 padding-left: 70px;
 padding-top: 20px;
}
.header .list ul{
 list-style: none;
  padding-right: 80px;
}
.header .list ul li{
 float: left;
 width: 100px;
 line-height: 100px;
 text-align: center;

}
.header .list ul li:hover {
 background-color: #000;
 color: white;
}
.banner{
 width: 100%;
 height: 550px;
}
.banner img{
 width: 100%;
 height: 550px;
}
.toplayer{
 width: 100%;
 height: 550px;
 position: absolute;
 top: 100px;
 left: 0px;
 opacity: 0.3;
 background-color: #000;
}
.bdc{
 width: 400px;
 height: 400px;
 position: absolute;
 top: 200px;
 left: 50%;
 margin-left: -200px;
 z-index: 9;
   opacity: 0.8;

}
.bdc form input{
 width: 400px;
 height: 40px;
 background-color: #000;
 opacity: 0.5;

 }
 input:hover{
  border:2px solid #07cbc9;
 }
 button{
  margin-top:20px;
  margin-left: 75px;
  width: 250px;
  height: 50px;
  line-height: 30px;
 }
 #textarea{
       height: 100px;
 }
 .about{
  
  height: 1000px;
  /*background-color: yellow;*/
    }
    .title{
     text-align: center;
     font-weight: bolder;
     font-size: 25px;
     padding-top: 50px;
    }
    hr{
     width: 30px;
     height: 1px;
     margin-top: 10px;
     background-color: #07cbc9;
    }
   
    }
    .wenzi{
     width: 550px;
     margin:20px auto;
       text-align: center;
    }

    为什么不能居中显示呢

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
提问者 liqihang 2018-04-10 19:01:33
  • 感觉是你的遮罩层高度高于图片的高度了。建议你调整一下遮罩层的高度,调整为和图片的高度是一样的。如果还有问题,建议同学新开一个问答,将你的代码贴出来看下。
    2018-04-11 09:40:27
  • 提问者 liqihang 回复 一叶知秋519 #2
    https://class.imooc.com/course/qadetail/46681 老师,我贴这里了
    2018-04-11 18:01:33
好帮手慕珊 2018-04-09 18:19:49

http://img1.sycdn.imooc.com//climg/5acb3e300001c80d03980491.jpg

样式上面多了个},导致无法应用样式。祝学习愉快!

  • 提问者 liqihang #1
    老师,在我的代码里,头部header是要设置fixed固定定位的,可是我设置之后整个页面都乱了,因为里边有position绝对定位的元素,怎么消除这种影响呢
    2018-04-10 10:02:38
  • 一叶知秋519 回复 提问者 liqihang #2
    给设置了绝对定位的元素设置一下z-index值再试下呢~~~~~
    2018-04-10 11:07:36
  • 提问者 liqihang 回复 一叶知秋519 #3
    老师图我在上面贴出了,我按你的意思给所有绝对定位的元素都设置了z-index值,但是header下面的banner层还是有变动,就是灰色部分那,那本来应该是白色背景色
    2018-04-10 19:02:56
提问者 liqihang 2018-04-09 17:36:03

http://img1.sycdn.imooc.com//climg/5acb33c800014c5702860198.jpg这里我定义了存放文字的div,并且给了他宽和高,应该会居中显示的啊,并且肯定会遇到边缘换行,为什么不居中也不换行显示

好帮手慕珊 2018-04-09 16:52:25

http://img1.sycdn.imooc.com//climg/5acb29a10001e40f04150092.jpg

上面一行,你并没有定义head样式,可以改为下面一行的内容。祝学习愉快!

  • 提问者 liqihang #1
    head的样式没定义,但我在wenzi这个class div 里定义了居中啊,不一样吗?
    2018-04-09 17:33:00
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师