你的位置:首页 > 网页设计

[网页设计]css水平居中总结


前言

  看了好多篇帖子,发现没有一个能够直接让新手很快上手使用的居中布局。所以在此进行一番总结,也算是我对居中布局的一点点积累沉淀,同时也方便初学者们拿来即用。

一、元素分类

1.行内元素

行内元素,也就是内联元素,可以在一行内显示多个。注:元素的高度、宽度、顶部底部边距均不可设置,元素的高度和宽度就是它包含的文字或图片的高度和宽度。

行内元素有这些:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

当然有些时候可以通过以下代码变成块级元素:

display: block;

2.块级元素

块级元素,霸占一行,别的元素要另起行才可以。注:元素的高度、宽度、顶部底部边距可设置,元素宽度在不设置的情况下,是它本身父容器的100%。

块级元素有这些:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

同样的你也可以通过以下代码把块级元素变为行内元素:

display: inline;

3.内联块状元素简介

内联块状元素,和行内元素相似,都在可以显示在一行上。注:元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素有这些:<img>、<input>

display: inline-block;

 

二、居中方法

a.使用左右外边距自适应方法:margin: 0 auto;    /*使用此方法需要变为内联块状元素*,且需要固定宽度*/

 

b.同样使用左右外边距方法:

width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px;        /*250px是元素的宽度除以2得到,且需要进行定位*/

 

c.父元素设置text-align: center;  /*使用此方法需要变为行内元素*/

 

d.对于宽度不确定的元素,可以在外层套上一个table标签,然后给table使用margin: 0 auto;来居中:

table{
  margin: 0 auto;
}

HTML代码:


<table>
    <tbody>
        <tr>
            <td>
                <div >
                  我想水平居中!
                </div>
            </td>
        </tr>  
    </tbody>
</table>
 

e.对于宽度不确定的元素,给它和父元素进行定位,分别设置left: -50%和left: 50%,然后实现水平居中:

.father{
  position:relative;
  left:50%;
  width: 960px;
  height: 300px;
  background: yellow;
}
.children{
  height: 30px;
  background:#ccc;
  position:relative;
  left:-50%;
}

HTML代码:

<div >
  <div >aaaaaaaa</div>
</div>