css字间距代码(css垂直对齐方式)

  CSS(Cascading Style Sheet)中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好的适应页面的美工设计,它以HTML语言为基础,在学习CSS前你要具备HTML基础知识。

image.png

  CSS提供丰富的格式化功能,如字体、颜色、背景及整体排版等,Web设计者可以设置不同的样式风格。那么,你知道在css中如何实现垂直对齐方式吗?

  1、line-height

  适用:单行文字(垂直居中)

  原理:将单行文字的行高设定后,文字会位于行高的垂直中间位置。

  2、line-height + inline-block

  原理:将多个元素或多行元素当成一个行元素来看待,所以我们必须要将这些数据多包一层,并将其设定为 inline-block。由于inline-block在不同浏览器会有空隙产生,因此设定父元素font-size:0来消除,从而达到完美的垂直居中。

  3、table + margin

  适用情景:单对象(水平居中)

  原理:将子元素设置块级表格,再设置水平居中。

  4、table + table-cell + vertical-align: middle

  适用情景:多对象(垂直居中)


发表评论

评论列表

还没有评论,快来说点什么吧~