女王控的博客

CSS居中设置

水平居中设置-行内元素

  • 如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

水平居中设置-定宽块状元素

  • 满足定宽和块状两个条件的元素是可以通过设置左右margin值为auto来实现居中的。

水平居中总结-不定宽块状元素方法

  • 加入 table 标签
{
    display:table; 
    margin:0 auto;
}
  • 改变块级元素的displayinline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果
  • 通过给父元素设置float,然后给父元素设置position:relativeleft:50%,子元素设置 position:relativeleft: -50%来实现水平居中。

垂直居中-父元素高度确定的单行文本

  • 通过设置父元素的heightline-height高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的基线间的距离 )。

垂直居中-父元素高度确定的多行文本

  • 使用插入table(包括tbody、tr、td)标签,同时设置 vertical-align:middle
  • 或者采用以下样式
{
    display:table-cell;
    vertical-align:middle;
} 

隐性改变display类型

  • position : absolute
  • float : left 或 float:right
  • 只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 widthheight 了,且默认宽度不占满父元素。

评论

阅读下一篇

Git忽略规则及.gitignore规则不生效的解决办法
2017-11-20 00:15:59
0%