国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

淺析CSS實現水平垂直同時居中的5種思路

2024-07-11 08:33:04
字體：大 中 小
來源：轉載
供稿：網友

水平居中和垂直居中已經單獨介紹過，本文將介紹水平垂直同時居中的5種思路

思路一：  text-align + line-height實現單行文本水平垂直居中

CSS Code復制內容到剪貼板
  1. <style>    .test{   
  2.     text-align: center;        line-height: 100px;   
  3. }    </style>  
XML/HTML Code復制內容到剪貼板
  1. <div class="test" style="background-color: lightblue;width: 200px;">測試文字</div>   

思路二： text-align + vertical-align

【1】在父元素設置text-align和vertical-align，并將父元素設置為table-cell元素，子元素設置為inline-block元素

[注意]若兼容IE7-瀏覽器，將結構改為<table>結構來實現table-cell的效果；用display:inline;zoom:1;來實現inline-block的效果

CSS Code復制內容到剪貼板
  1. <style>    .parent{   
  2.     display: table-cell;        text-align: center;   
  3.     vertical-align: middle;    }   
  4. .child{        display: inline-block;   
  5. }    </style>  
XML/HTML Code復制內容到剪貼板
  1. <div class="parent" style="background-color: gray; width:200px; height:100px;">     <div class="child" style="background-color: lightblue;">測試文字</div>  
  2. </div>   

【2】若子元素是圖像，可不使用table-cell，而是其父元素用行高替代高度，且字體大小設為0。子元素本身設置vertical-align:middle

CSS Code復制內容到剪貼板
  1. <style>    .parent{   
  2.     text-align: center;        line-height: 100px;   
  3.     font-size: 0;    }   
  4. .child{        vertical-align: middle;   

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板： 余庆县| 汾西县| 广州市| 青岛市| 卢湾区| 仁布县| 株洲县| 仪陇县| 肥东县| 依兰县| 济源市| 新余市| 海南省| 大冶市| 阳泉市| 阜平县| 和田市| 襄城县| 梅河口市| 云霄县| 临高县| 疏附县| 霍州市| 庆元县| 无锡市| 唐海县| 阿巴嘎旗| 巨野县| 南乐县| 湛江市| 临泽县| 寻甸| 青田县| 萍乡市| 澎湖县| 陕西省| 中山市| 金秀| 张家口市| 沁阳市| 辽宁省|