zoukankan      html  css  js  c++  java
  • CSS中水平居中的方法

    水平居中:

    1. 是inline元素还是inline-*元素(如文本或链接)?

      使用  text-align:center水平居中父元素中内嵌元素;这将适用于内联(inline),内联块(inline-block),内联表(inline-table),内联弹性(inline-flex)等
    

    html

    <header>
         This text is centered.
      </header>
    
      <nav role='navigation'>
         <a href="#0">One</a>
         <a href="#0">Two</a>
         <a href="#0">Three</a>
        <a href="#0">Four</a>
      </nav>

    css:

      body {
      background: #f06d06;
    }
    header, nav {
      text-align: center;
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    nav a {
      text-decoration: none;
      background: #333;
      border-radius: 5px;
      color: white;
      padding: 3px 8px;
    };

    2 是block块级元素吗?

    使用 margin:0 auto,给需要居中的块级元素设置width,否则是全宽的;不能使一个带有float属性的元素居中,使用这种方法。


    html:

    <main>
      <div class="center">
        I'm a block level element and am centered.
      </div>
    </main>

    css:

    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    
    .center {
      margin: 0 auto;
      width: 200px;
      background: black;
      padding: 20px;
      color: white;
    }

    3 多个块级元素?

    需要水平居中在一行上面,方法是使它们有不同的display类型

    flex布局的居中是:justify-content: center


    html:

    //一个是display:inline-block
    <main class="inline-block-center">
    
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
    
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    
    </main>
    
    //一个是display:flex       居中是:justify-content: center;
    <main class="flex-center">
    
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
    
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    
    </main>

    CSS:

    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    
    main div {
      background: black;
      color: white;
      padding: 15px;
      max-width: 125px;
      margin: 5px;
    }
    
    .inline-block-center {
      text-align: center;
    }
    .inline-block-center div {
    //设置 了这个属性,块级元素也会排在一行上面,不需要使用float属性
      display: inline-block;
      text-align: left;
    }
    
    .flex-center {
      display: flex;
      justify-content: center;
    }

    垂直方向上堆叠在一起,最好是改变宽度,使其展现出堆叠的效果。


    Html:

    <main>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    </main>

    CSS:

    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    
    main div {
      background: black;
      margin: 0 auto;
      color: white;
      padding: 15px;
      margin: 5px auto;
    }
    
    main div:nth-child(1) {
      width: 200px;
    }
    main div:nth-child(2) {
      width: 400px;
    }
    main div:nth-child(3) {
      width: 125px;
    }

    未完待续


    原文参考:参考链接
    有道云笔记
    github

  • 相关阅读:
    短视频直播源码开发,如何实现图标点击态的蒙层效果
    直播商城小程序开发,类似于转盘抽奖功能的实现
    Android语音聊天室源码开发,文本内容的分享发送与接收方法简述
    语音交友软件源码开发,axios+Vue实现上传文件显示进度功能
    一对一直播源码开发,前端如何实现整套视频直播技术流程
    04. 多地办公
    03. git分支
    02. git基本命令(适合于单机使用)
    01. git初识
    多人协作解决方案,git flow的使用
  • 原文地址:https://www.cnblogs.com/linewman/p/9918384.html
Copyright © 2011-2022 走看看