网页元素居中攻略记_(1)元素水平居中

最新推荐文章于 2023-12-19 09:24:34 发布

crper

最新推荐文章于 2023-12-19 09:24:34 发布

阅读量4k

点赞数

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 网页元素居中攻略记文章标签：元素水平居中块级元素水平居中网页居中

本文链接：https://blog.csdn.net/crper/article/details/46241687

版权

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

网页元素居中攻略记

6 篇文章 29 订阅

订阅专栏

行内元素水平居中

方案

行内元素包裹在一个属性display为block的父层元素中，父块text-align:center即可实现

代码实现

index.html

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>行内元素水平居中</title>
    <style type="text/css">
      p {
        display: ineline-block;
      }

      .testDiv {
        text-align: center;
        width: 500px;
        height: 500px;
        background: rgb(78, 243, 145);
      }

      /*
      适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）
       */

    </style>
  </head>

  <body>
    <div class="testDiv">
      <span>我是测试文本</span>
      <b>|我也是</b>
      <p>我也是测试的啊</p>
    </div>
  </body>

</html>

一个块状元素水平居中

方案

设置块的margin为左右为auto即可,上下margin可以根据需求设置{margin:0 auto}

代码实现

index.html

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>一个块元素水平居中</title>
    <style type="text/css">
      #container {
        width: 800px;
        height: 800px;
        background: rgb(129, 97, 53);
        margin: 0 auto;
      }
      

    </style>
  </head>

  <body>
    <div id="container">

    </div>
  </body>

</html>

多个块状元素水平居中

方案

参考第一个实现,内部DIV设置为内联块,包裹块设置text-align:center

代码实现

index.html

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>多个块元素水平居中</title>
    <style type="text/css">
      #container {
        text-align: center;
        background: rgb(26, 188, 130);
        width: 500px;
        height: 500px;
      }

      #testDiv1 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #03232A;
      }

      #testDiv2 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #122A03;
      }

      #testDiv3 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #189FBD;
      }

      #testDiv4 {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #E20FAD;
      }

    </style>
  </head>

  <body>
    <div id="container">
      <div id="testDiv1"></div>
      <div id="testDiv2"></div>
      <div id="testDiv3"></div>
      <div id="testDiv4"></div>
    </div>
  </body>

</html>