zoukankan      html  css  js  c++  java
  • CSS 23 水平居中

    步骤 1 : 

    内容居中

    <style>
    div{
      border:1px solid lightgray;
      margin:10px;
    }
    </style>
    <div align="center">
    通过设置属性align="center" 居中的内容
    </div>
     
    <div  style="text-align:center">
    通过样式style="text-align:center" 居中的内容
    </div>

     步骤 2 : 

    元素居中

    <style>
      div{
         border: solid 1px lightgray;
         margin: 10px;
      }
      span{
         border: solid 1px lightskyblue;
      }
    </style>
    <div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
     
    <div style="300px;margin:0 auto">
      设置本div的宽度,然后再使用样式 margin: 0 auto来使得元素居中</div>
     
    <span style="300px;margin:0 auto">
      span 是内联元素,无法设置宽度,所以不能通过margin:0 auto居中</span>
     
    <div style="text-align:center">
      <span>span的居中可以通过放置在div中,然后让div text-align实现居中</span>
    </div>

  • 相关阅读:
    AOJ 718.计算GPA
    AOJ 11.Rails
    AOJ 592.神奇的叶子
    AOJ 10.目标柏林
    洛谷P1030求先序排列
    vijos1514天才的记忆
    洛谷2016战略游戏
    LOJ10155数字转换
    洛谷2014选课
    洛谷2015二叉苹果树
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/13303753.html
Copyright © 2011-2022 走看看