Heim > Web-Frontend > HTML-Tutorial > css水平居中总结_html/css_WEB-ITnose

css水平居中总结_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:03
Original
1030 Leute haben es durchsucht

前言

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

 

一、元素分类

1.行内元素

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

行内元素有这些:


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

display: block;

 

2.块级元素

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

块级元素有这些:

...

    、、

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

    display: inline;

     

    3.内联块状元素简介

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

    内联块状元素有这些:css水平居中总结_html/css_WEB-ITnose

    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代码:

       

           

               

           

     

       

                   

                      我想水平居中!

                   

               

     

    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代码:


      
    aaaaaaaa

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage