zoukankan      html  css  js  c++  java
  • 秒懂-单列布局水平居中布局

    水平居中布局

    1. 父元素text-align:center;子元素:inline-block;
    • 优点:兼容性好;
    • 不足:需要同时设置子元素和父元素

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>水平居中布局</title>
      <style>
          *{
            margin: 0;
            padding: 0;
          }
          .parent {
               100%;
              background: green;
              text-align: center;
          }
          .child {
              display: inline-block;
               800px;
              height: 100px;
              background: blue;
          }
      </style>
      </head>
      <body>
      <div class="parent">
          <div class="child">1</div>
          <div class="child">2</div>
          <div class="child">3</div>
          <div class="child">4</div>
          <div class="child">5</div>
          <div class="child">6</div>
      </div>
      </body>
      </html>
      

        

    1
    2
    3
    4
    5
    我若风光万人陪,一无所有还有谁?
  • 相关阅读:
    JZOJ1495 宝石
    JZOJ1496 页
    jzoj1497. 景点中心
    2019.8.2总结
    学习进度报告2021/3/19
    学习进度报告2021/3/18
    《学会提问》读书笔记2
    学习进度报告2021/3/17
    学习进度报告2021/3/16
    学习进度报告2021/3/15
  • 原文地址:https://www.cnblogs.com/wanghongze/p/7483037.html
Copyright © 2011-2022 走看看