当前位置：Gxlcms > html代码 > css水平居中总结_html/css_WEB-ITnose

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

时间：2021-07-01 10:21:17 帮助过：19人阅读

前言

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

一、元素分类

1.行内元素

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

行内元素有这些：

、、
、、、、

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

display: block;

2.块级元素

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

块级元素有这些：

、

、

...

、
    、
      、
      、、、
      、

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

      display: inline;

      3.内联块状元素简介

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

      内联块状元素有这些：、

      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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！