北大青鸟WEB前端培训:CSS实现居中对齐的几种方法

日期:2019-07-29 15:04作者:北大青鸟西安华清校区

摘要:Part1 水平居中的方案: 1.行内元素,可以设置text-align属性 text-align:center; 2.固定宽度块状元素,可以设置左右margin值为auto来使用 margin:0 auto; 3.不定宽度块状元素 a:在元素外加入 table 标签
关键词: 北大青鸟web前端
  Part1 水平居中的方案:
 
  1.行内元素,可以设置text-align属性
 
  text-align:center;
 
  2.固定宽度块状元素,可以设置左右margin值为auto来使用
 
  margin:0 auto;
 
  3.不定宽度块状元素
 
  a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto
 
  b:给该元素设置 displa:inine 方法
 
  c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%
 
css实现居中对齐的几种方法
 
  Part2 垂直居中的方案:
 
  1.让line-height和height等高实现单行文本垂直居中;
 
  .css文件
 
  .outerBox{
 
  width:200px;
 
  height:100px;
 
  border: 1px solid #000;
 
  text-align:center; /* 水平居中 */
 
  line-height: 100px; /* line-height=height */
 
  }
 
  .html文件
 
  <div class=“outerBox”>
 
  center text
 
  </div>
 
  2.vertical-align实现文本的垂直居中
 
  可以使用vertical-align实现垂直居中,不过vertical-align仅适用于内联元素和table-cell元素,因此之前需要转化
 
  .outerBox{
 
  width:200px;
 
  height:100px;
 
  border: 1px solid #000;
 
  text-align:center; /* 水平居中 */
 
  display:table-cell; /*转化成table-cell元素*/
 
  vertical-align:middle;
 
  /*垂直居中对齐,vertical-align适用于内联及table-cell元素*/
 
  }
 
  总结
 
  1.实现文本居中的方案:
 
  用text-align:center;可以实现文字水平居中;
 
  line-height与height等高实现单行文本垂直居中;
 
  vertical-align实现文本的垂直居中;
 
  2.div居中实现:
 
  margin:auto实现水平居中
 
  text-align:center实现水平居中
 
  table-cell元素居中
 
  绝对定位居中,margin偏移
 
  绝对定位居中,利用transform偏移
 
  绝对定位居中,利用margin:auto偏移
 
  Flexbox居中






转载请保留本文网址https://www.sxbdqn.cn
上一篇:css超链接样式怎么设置 css超链接属性
下一篇:北大青鸟WEB前端培训:CSS Id 和 Class选择器
北大青鸟
校区简介
青鸟品牌
就业体系
就业学生
在线报名
热门课程
BCVE视频特效课程
BCUI全链路UI设计
BCSP软件开发专业
BCNT网络工程师
JAVA工程师
青鸟问答
男生学什么技术好
女生学什么专业好
北大青鸟师资
北大青鸟就业
北大青鸟学费