你好，about区上部分的居中我总是做不好

1、设置居中后，我发现h1的位置有点往右偏，于是我设置了margin-left，但是这样之后改变页面的大小，无法相应的适应屏幕分辨率。蓝色下划线和文字也是一样，但是banner区的表单我也是一样的方法，只是多加了一个定位，问题是定位的关系吗？

2、一开始我想通过给h1设置下边框的方法实现下划线，但是还没做到如何使下划线居中，发现h1的文字一直在页面的左边无法居中，请问是什么原因。去掉下边框就可以居中过去了，虽然位置有点偏。

mengzezheng 2019-07-03

源自：前端油画商城案例 4-3 项目作业

收起

2回答

好帮手慕小尤 2019-07-03 18:05:31

同学你好，修改css样式，代码如下：

.about .about-top .about-h h1{ 
    color: #000;
    text-align:center;
} 
.about .about-top .line1 hr{ 
    background-color:#07cbc9;
    display:block;
    width: 40px;
    height: 2px;
    margin:15px auto;
} 
.about .about-top .p1{ 
    color: #CCCCCC;
    padding-bottom: 30px;
    width: 45%;
    margin: 0 auto;
    font-size: 15px;
    line-height: 25px;
    text-align:center;
}

祝学习愉快！

收起回答

好帮手慕小尤 2019-07-03 17:46:29

同学你好，请复制粘贴全部代码进行反馈，防止代码不一致问题，方便寻找问题。祝学习愉快！

收起回答

提问者 mengzezheng #1

.about .about-top{ width:100%; height:150px; text-align: center; margin-top:50px; } .about .about-top .about-h h1{ margin-left:-65px; margin-bottom: 12px; } .about .about-top .line1 hr{ width:25px; border-color: #07cbc9; margin-left:715px; } .about .about-top .p1{ margin-top:10px; width:510px; height:80px; margin-left:470px; color:#CCCCCC; } .about-mid .about-img img{ width:600px; height:300px; } .about-mid .about-img{ text-align: center; height:500px; }

2019-07-03 17:48:49
提问者 mengzezheng #2

<div class="about"> <div class="about-top"> <div class="about-h"><h1>ABOUT</h1></div> <div class="line1"><hr></div> <div class="p1"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> </div> <div class="about-mid"> <div class="about-img"><img src="images/bb3.jpg"></div> </div> </div>

2019-07-03 17:49:15