> 웹 프론트엔드 > HTML 튜토리얼 > css水平居中总结_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:41:03
원래의
1031명이 탐색했습니다.

前言

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

 

一、元素分类

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿