1.垂直居中

  -父元素高度确定的单行文本:

    设置父元素的 height 和 line-height  高度一致来实现的。(height: 该元素的高度;line-height: 行高(行间距),指在文本中行与行之间的 基线间的距离 )。

    弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

  -父元素高度确定的多行文本:

    (1)插入 table(需要td)并且同时设置 td  vertical-align:middle,注:td 标签默认情况下 vertical-align 为 middle

    (2)在 chrome、firefox 及 IE8 以上:设置display:table-cell(设置为表格单元显示),激活 vertical-align 属性,vertical-align:middle

2. position : absolute 或 float : left(right)

只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block的方式显示。

posted on 2018-08-09 17:22  超级蛋蛋饭  阅读(68)  评论(0编辑  收藏  举报