HTML把内容居中怎么弄

开新坑了拿这个系列对自己入门时遇到的坑和开发时的一些习惯进行记录 （才刚入门就敢拽）

当然，因为我也的确刚入门，所以问题自然会很多，希望新人看了能少遇到坑，大神看了能指点指点我啦。

本次目标

在网上随便找了一张简单一点的稿子过来做布局（我只做了布局）稿子长这样:

我大概的仿照了一下做出的是下面这样的傻样:

针对稿子的几个部分做了基本布局

本次的例子

布局的核心知识

在我的看法中布局有两个核心属性，一个是display另一个是position。其中一个决定了一个元素的基本特性， 另一个决定了元素的定位方式。其他相关的布局属性都是辅助这两个属性进行微调的。 今天的布局稿子只用到了其中的display就完成了，标准的流式布局。

实现过程

接下来我们一个一个部分来实现，在内容开发之前我们先对整个页面做一下设置。

body{
    margin:0px;
    background-color:#aaa;
}

我们去掉body的外边距，因为在默认情况下body和浏览器之间是有一小段距离的。

头部

因为是流式布局，所以我们只需要内容一个一个排下去就行。内容部分我们首先进行头部的制作，下面是一个简单的头部结构。

<div class="header">
    <div>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a style="float : right;"></a>
    </div>
</div>

使用一个div里面嵌套一个div然后再放入头部的具体内容。

.header{
    border-bottom:1px solid #bbb;
    background-color:#fff;
    text-align: center;
}

首先制作最外层容器的样式，因为容器是div，所以默认的display的值是block。 block的特性是块状元素，位置占满整行（不管实际宽度是不是占满整行）。 块级元素就像一个容器一样，可以进行大小控制。

这里我们没有给容器设置高度，因为我们等会通过容器内的div来将它撑开，如果设置了高度就会被固定。 border-bottom给容器设置了一个与背景过渡的下边框。background-color设置了背景色为白色。 text-align使得内容居中，这是最常见的居中方式。想让一个对象水平居中可以给其父元素加入这个属性。

.header>div{
    height:60px;
    text-align: left;
    display: inline-block;
    width:1000px;
}

由于第二层只有一个div，所以我们通过子元素选择器.header>div来让CSS定位到元素。 我们通过给第二层div设置高度来让父元素被撑出相同的高度。 因为text-align属性是会传递的，我们只希望第二层div居中，而它的内容相对它靠左对齐， 所以我们将它的text-align设置为left。

最后我们设置display为inline-block行内块级元素，让它可以被居中， 它和block唯一的区别就是不会占满整行， block在宽度没有占满整行时会有一个固定的margin-right占满整行，所以就算你使用text-align 进行居中，一个内部的block元素本身也是不会居中的（不过由于属性传递，元素的子元素会相对其居中）。 最后设置它的宽度为1000px，这样不管浏览器的宽度多宽我们都可以得到一个固定宽度并保持在头部中间的内容 (可以在例子中拖动浏览器尺寸测试)。

.header>div>a{
    display: inline-block;
    width:120px;
    height:50px;
    background-color:#ddd;
    margin-top:4px;
}

上面是代表内容项的a标签的样式，这里我们想把它做成一个一个的格子来展示。由于a标签的默认display 是inline行内元素，并不是块级的，所以无法设置一些影响尺寸的属性，如width和padding (内边距)。 所以我们首先把它设置成块级元素然后设置宽高和背景色。这样就有一个一个的格子在头部中，通过margin-top 进行临时的竖直居中调整。

<a style="float:right;">a>

最后我们通过给一个选项设置float属性来达到向右浮动的效果，不过需要说明一下的就是float 属性使用之后元素就不会占用位置了，它将不进入流式布局的计算。比如我们给第二层div加入这个属性， 它就不会接受流式布局相关的属性如text-align属性，所以不会再居中。并且第一层div 也会因为它不占用布局的空间而不被撑开，相当于是一种系统自动的绝对布局（绝对布局在之后的position文章中再说明）

Banner

接下来的网页Banner就很简单了，就是一个有高度的块级元素而已。

<div class="banner"></div>

.banner{
    height:500px;
    background-color:#eee;
}

我们给它加一个背景色区分一下就可以了

商品小图

我们仔细看一下商品小图的布局，每一个商品都贴在一起，可是商品大小却有宽度不一样的。 最终的集合体是居中于整个页面的。那我们首先把整个结构贴出来。

<div class="items">
    <a class="m20"></a><a class="m20"></a><a class="m20"></a><a class="m20"></a><a class="m20"></a>
    <a class="m20"></a><a class="m20"></a><a class="m20"></a><a class="m40"></a>
    <a class="m25"></a><a class="m25"></a><a class="m25"></a><a class="m25"></a>
</div>

一个父元素里面放了3行子元素（当然，并不是通过html来分行的），实际上每行的元素我们也放到一行是为了去除空格， 如果标签之间分行的话会有间隙，紧贴在一起的标签才不会有间隙。

.items{
    margin:80px auto;
    width:900px;
    line-height: 0px;
}

上面是整个商品小图容器的样式，使用了另一种居中方式，这种居中方式只对display的值为 block的块级元素有效。设置margin-left和margin-right为auto（我使用的是简写）， 然后设置一个固定宽度即可。将line-height设置为0是为了去除每行内容间的距离。

.items>a{
    display: inline-block;
    background-color:#fff;
    border:2px solid #555;
    height:80px;
    box-sizing:border-box;
}

接下来就是这个布局的重点了，上面的前四项基本样式大家应该比较清楚，设置颜色宽高和行内块级元素模式。 最后一项box-sizing是在CSS3中出现的新的属性，它有两个值，默认值content-box 是之前CSS规定的宽高度行为，当你使用padding或者border时容器将向外被挤开。 现在我们可以设置成border-box，这样它就变成了向内挤。当然，这一切都要基于你设置了宽度和高度。

如果把容器的宽度看做100%，那么稿子中商品有三种宽度:20%、25%、40%， 我们针对这几种配置一下样式就大功告成了。

.m20{
    width:20%;
}
.m40{
    width:40%;
}
.m25{
    width:25%;
}

上面的样式配置实际上就是设置一下不同块元素的宽度而已。最后我们把它配置到各个a标签上面就完成了。

活动大图

在商品小图的下面有四张活动大图，他们的宽度相同，每个对象之间有一个固定的间隔。 对于这种情况无法使用box-sizing进行完美的占满宽度，因为外边距margin是不在box-sizing 的计算之中的。现在的我用的还是蠢办法:固定值配置，手动调整。

<div class="imgs">
    <a></a><a></a><a></a><a></a>
</div>

我们在div中放了4个a标签作为四张大图。

.imgs{
    text-align: center;
}
.imgs>a{
    display: inline-block;
    background-color:#fff;
    height:280px;
    width:213px;
    margin:8px;
}

手动调整顾名思义，自己慢慢改，改到合适为止。我们配置的div没有什么修改，只是让其内容居中。 里面的a标签设置好合适的边距和高度后来调整宽度，最终调整到一个比较理想的状态即可。

底部栏

底部栏只是一个简单的容器居中的布局而已。像下面这样:

.floor{
    margin:8px auto;
    width:900px;
    background-color:#fff;
    height:60px;
}

结束语

实际上前端布局的核心难点并不多，只要能理解前端布局的细节之后，技术就没有想法那么重要了。 总共完成下来也就一百多行代码，熟练的话十多分钟就可以完成。 虽然勉勉强强算是个实战教程，可是例子还是太少啦，下次会尽量在内容中加入更多的例子。

文章为原创内容并且是个人观点和见解，如有错误或问题欢迎指出
本文的地址为 :  http://evillcg.com/blog/item/1466520449/