今天在上Web，老师让我们直接就做一个网页，然后在这个过程中遇到了一个小问题：那就是如何让多张图片一起居中，让浮动图片居中问题，或者是很多图片居中排列等问题的解决方法吧
老师想让我们把这几张图片弄好顺序、排列好，我知道大家肯定会想到浮动，浮动的话确实能够将图片都紧凑的排列在一起，添加了浮动的效果如下：
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的淘宝</title>
</head>
<style type="text/css">
.logo-search>div,#hot-screen>div{
float: left; /*在这里添加了浮动,其他的啥都没加啦*/
}
</style>
<body>
<!-- 导航部分 -->
<div id="site-nav">
<div id="site-nav-bd">
<img src="images/site-nav.jpg" />
</div>
</div>
<!-- 页面头部 -->
<div id="top-header">
<div class="logo-search">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="search"><img src="images/search.jpg" /></div>
</div>
<div class="channel-menu"><img src="images/channel-menu.jpg" /></div>
</div>
<!-- 热门部分 -->
<div id="hot-screen">
<div class="product-list"><img src="images/product-list.jpg" /></div>
<div class="attraction"><img src="images/attraction.jpg" /></div>
<div class="expressway"><img src="images/expressway.jpg" /></div>
</div>
</body>
</html>
但是可以发现,这个最终做的效果好像有"那味儿"了,但是现在如果说我想要这个"整体"居中的话我该怎么做呢?我查过一些博客,上面讲的我觉得有用的知识有,但是好像又参杂了一些"利用价值不太高"的东西,不过这也可能和每个人遇到的情况不一样的原因导致,所以,以下都是我遇到问题的解决方法
我们现在对于这个网页来说,可以先分为这几个部分,在上面的代码中也可以看出来,是分成了三个部分的,分别是"导航",“页面头部”,“热门部分”
可以看到,每一个部分我都是用一个"盒子"把它们封装起来的,怎么让"盒子"带动它里面的元素一起平移呢?
其实,非常的简单!这其实扯到了CSS布局问题,在这里我先问大家一些问题,我相信回答了这些问题之后,你对这方面的问题一定也迎刃而解了
1️⃣一般情况下,哪个属性才可以设置元素居中❔
🅿要水平居中对齐一个元素,一般会在想要居中的元素外部再添加一个div,也就是容器，然后让容器移动，同时就带动整个想要居中的元素移动，一般直接使用 margin: auto
2️⃣那么请问这个“容器”如何移动，它移动的依据是什么，直接写margin: auto就行了吗❔
🅿如果说，直接就这么简单的写上这句话的话，可以发现并不能够达到我们想要的效果：
<style type="text/css">
.logo-search>div,#hot-screen>div{
float: left;
}
#top-header{
margin: 0 auto;
}
</style>
效果：
说明它不能够“直接”移动，那是因为从代码上来看，它不知道容器的“多少”要移动，就是你虽然在外面加了一个div，但是这个div你知道多大吗？你不知道，甚至你可以把所有的东西都移动到这里，所以这个容器的“大小”你是不清楚的，那么系统也就不会去移动了，因为它根本不知道要移动多少💢💥💥💥，我们给它设置一个宽度，就可以了，高度的话看情况看要不要设置
如果你不清楚的话，可以点击开发者工具查看，将鼠标移动到想要查看大小的位置就行了，可以看到我最长的图片是1000x28，设置的时候可以设置的比这个数值稍微大那么一点点，那么代码改成：
<style type="text/css">
.logo-search>div,#hot-screen>div{
float: left;
}
#site-nav,#top-header,#hot-screen{
width: 1024px;
margin: 0 auto;
}
</style>
效果：
最后
❗❕❗❗❗❗❗❗❗❗设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配
下一篇博客我会出一个CSS布局方式详细版本，今天先到这儿，下期再见！💨