为什么无法设置居中

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="油画商城项目.css">
<script type="text/javascript" src="油画商城项目.js"></script>
</head>
<body>
<div class="header">
<div class="imge_1">
<img src="1.jpg">
</div>
<div class="menu" onmouseleave="show_menu1()">
<div class="menu_title" onclick="show_menu()" >
<a href="#">内容分类</a>
</div>
<ul id="menu1">
<li>现实主义</li>
<li>抽象主义</li>
</ul>
</div>
<div class="auth">
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="banner">
<img src="2.jpg" class="banner_img">
</div>
<div class="img_content">
<ul>
<li>
<div>
     <img src="3.jpg">
         </div>
     <div class="info">
     <h3>风景画</h3>
     <p>
     此时的雨与春雨有了很大的区别，具有自己独有的特点，一般以雷阵雨居多，而且常常是突然袭击，不请自来，来时动静挺大，陪同而至的还有雷电和大风
     </p>
     <div class="btn">
     <div class="price">5800</div>
     <a href="#">
     <div class="img_btn">
     <img src="4.jpg">
                            </div>
     </a>
     </div>
     </div>
             </li>
             <li>
     <img src="3.jpg">
     <div class="info">
     <h3>风景画</h3>
     <p>
     此时的雨与春雨有了很大的区别，具有自己独有的特点，一般以雷阵雨居多，而且常常是突然袭击，不请自来，来时动静挺大，陪同而至的还有雷电和大风
     </p>
     <div class="btn">
     <div class="price">5800</div>
     <a href="#">
                        <div class="img_btn">
                            <img src="4.jpg">
                            </div>
                        </a>
     </div>
     </div>
             </li>
             <li>
     <img src="3.jpg">
     <div class="info">
     <h3>风景画</h3>
     <p>
     此时的雨与春雨有了很大的区别，具有自己独有的特点，一般以雷阵雨居多，而且常常是突然袭击，不请自来，来时动静挺大，陪同而至的还有雷电和大风
     </p>
     <div class="btn">
     <div class="price">5800</div>
     <a href="#">
                        <div class="img_btn">
                            <img src="4.jpg">
                            </div>
                        </a>
     </div>
     </div>
             </li>
             <li>
     <img src="3.jpg">
     <div class="info">
     <h3>风景画</h3>
     <p>
     此时的雨与春雨有了很大的区别，具有自己独有的特点，一般以雷阵雨居多，而且常常是突然袭击，不请自来，来时动静挺大，陪同而至的还有雷电和大风
     </p>
     <div class="btn">
     <div class="price">5800</div>
     <a href="#">
                        <div class="img_btn">
                            <img src="4.jpg">
                            </div>
                        </a>
     </div>
     </div>
             </li>
             <li>
     <img src="3.jpg">
     <div class="info">
     <h3>风景画</h3>
     <p>
     此时的雨与春雨有了很大的区别，具有自己独有的特点，一般以雷阵雨居多，而且常常是突然袭击，不请自来，来时动静挺大，陪同而至的还有雷电和大风
     </p>
     <div class="btn">
     <div class="price">5800</div>
     <a href="#">
                        <div class="img_btn">
                            <img src="4.jpg">
                            </div>
                        </a>
     </div>
     </div>
             </li>
             <li>
     <img src="3.jpg">
     <div class="info">
     <h3>风景画</h3>
     <p>
     此时的雨与春雨有了很大的区别，具有自己独有的特点，一般以雷阵雨居多，而且常常是突然袭击，不请自来，来时动静挺大，陪同而至的还有雷电和大风
     </p>
     <div class="btn">
     <div class="price">5800</div>
     <a href="#">
                        <div class="img_btn">
                            <img src="4.jpg">
                            </div>
                        </a>
     </div>
     </div>
             </li>
            </ul>
     </div>
     <div class="page">
     <ul>
     <li><a href="#">首页</a></li>
     <li><a href="#">上一页</a></li>
     <li><span class="first">1</span></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><a href="#">...</a></li>
     <li><a href="#">98</a></li>
     <li><a href="#">99</a></li>
     <li><a href="#">下一页</a></li>
     <li><a href="#">尾页</a></li>
     </ul>
     </div>
</div>
<div class="footer">
<p><span>aaaaaaaaaaaaa</span>ooooooooooooo</p>
</div>
 
</body>
</html>

padding:0px;

margin:0px;

}

/*body{

background-color:gray;

}*/

.imge_1 img{

width:400px;

height:100px;

float:left;

position:relative;

}

.imge_1{

width:400px;

height:100px;

box-shadow:0 0 5px 3px #ccc;

float:left;

}

.header{

margin:25px auto;

width:1260px;

}

.header .menu ul{

display:none;

list-style:none;

position:absolute;

width:40px;

opacity:0.3;

background-color:white;/*透明有问题，点开内容分类还是看不到？*/

z-index:50;

}

.header .menu ul li{

margin-top:10px;

/*margin-left:-40px;*/

text-align:center;

width:80px;

}

.header .menu{

float:left;

position:relative;

margin-left:40px;

margin-top:40px;

/*margin-left:40px;*/

}

.header .menu .menu_title{

border-bottom:1px solid black;

padding-bottom:10px;

width:80px;

text-align:center;

}

color:red;

text-decoration:none;

}

.auth ul li{

float:right;

list-style:none;

margin-right:100px;

padding-top:40px;

}

.content{

margin:25px auto;

width:1260px;

}

.content .banner img{

width:1260px;

height:400px;

margin-top:20px;

}

.img_content ul li{

width:360px;

float:left;

margin:20px 60px 60px 0; /*还是无法设置右对齐*/

list-style:none;

position:relative;

height:520px;

box-shadow:0 0 5px 3px #ccc;

background-color:gray;

}

.img_content ul li img{

width:360px;

height:300px;

}

.img_content ul li .btn img{

width:20px;

height:20px;

}

.info{

margin-left:20px;

margin-right:20px;

}

.price{

float:left;

color:red;

font-size:20px;

}

.btn a{

float:right;

}

.info .btn .img_btn{

width:40px;

height:30px;

background-color:red;

text-align:center;/*还是无法设置居中*/

border-radius:10px;

float:right;

}

.info .btn .img_btn img{

width:20px;

height:20px;

margin-top:5px;

/*margin-left:10px;由于上面无法设置居中，所以只能这样设置*/

}

.btn{

width:250px;

}

.info h3{

font-size:25px;

color:red;

/*margin-top:10px;设置这个不能用为什么*/

}

.info p{

line-height:20px;

}

.page ul li{

float:left;

list-style:none;

margin-right:20px;

}

.page{

width:1260px;

height:60px;

line-height:60px;

/*border:1px solid black;*/

overflow:hidden;

}

.page ul{

width:500px;/*要设置宽度才能实现居中*/

margin:auto;

overflow:hidden;

}

.first{

border-radius:50%;

background-color:gray;

padding:3px 3px;

}

.footer{

width:1200px;

height:100px;

margin:60px auto;

border-top:1px solid black;

overflow:hidden;

}

.footer p{

text-align:center;

}

.footer p span{

color:red;

}

var flag=true;

function show_menu(){

var menu1=document.getElementById("menu1");

if(flag){

menu1.style.display="block";

flag=false;

}

else{

menu1.style.display="none";

flag=true;

}

function show_menu1(){

var menu1=document.getElementById("menu1");

menu1.style.display="none";

flag=true;

}

cj啦啦啦啦 2019-10-31

源自：前端油画商城案例 1-1 项目导引

收起

3回答

好帮手慕小班 2019-11-04 14:19:17

同学你好，将.banner区域的宽度修改为1200px即可达到左右对齐的效果如下：

如上所示6个图片所在的img_content在展示时，li设置的宽度为360px，右边距为60px，每行一共3个li，总宽度为1260px。

将banner调整为1200px后，相当于将最右边的li的margin-right不展示，也就是不展示最后一个li的留白，也就达到了居中的效果。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

好帮手慕柯南 2019-11-01 17:14:50

同学你好！

很理解同学着急的心情，迫切的想要知道为什么是这样，这里建议同学要慢慢来理解，知识的学习是需要融会贯通的，刚开始的时候都是会有很多不明白的地方，接下来给同学分析一下为什么这样可以居中：

首先要明白为什么没有居中，先看同学的布局content下面是banner、img_content、page，你给最外层的div.content设置了宽度1260px，没有给div.img_content、div.banner设置宽度。此时div.content和div.img_content、div.banner的宽度都为1260px，并且同学给图片也设置了1260px的宽度
接下来看同学给li设置的，宽度为360px，右边距为60px，每行一共3个li，总宽度为1260px。
三个li的宽度和banner区的图片的宽度是一样的。这样就会看到留白。因为3个li的宽度正好等于banner图片的宽度
接下来如果将banner区图片的宽度改小一点就可以实现了，所以这里老师采用的方法是该最外层div的宽度，并且将banner区的图片宽度设置为100%。这样banner区图片的宽度就变小了
上次老师让同学改的是ul的宽度呢，同学这里是将所有的宽度都改为1260了呢
关于这里的设置老师在视频中有详细的讲解呢，建议同学在看一下视频巩固一下呢。
https://class.imooc.com/lesson/968#mid=23040
另外同学所说的居中是指这里的居中吗？，看同学完成的是可以的呢