你的位置:首页 > 软件开发 > 网页设计 > 从项目需求角度,使用纯CSS方案解决垂直居中

从项目需求角度,使用纯CSS方案解决垂直居中

发布时间:2017-04-19 00:00:22
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰。在众多CSS常见的样式需求中,有一奇葩式的存在【垂直居中】,因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中,显的那么艰难。我们往往需要额外添加标签元素与充满hack味道的属性才能解决,而 ...

 CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰。在众多CSS常见的样式需求中,有一奇葩式的存在【垂直居中】,因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中,显的那么艰难。我们往往需要额外添加标签元素与充满hack味道的属性才能解决,而在涉及到不固定元素尺寸的时候,更显艰难。唉,日子还得照样过,工作还得继续干,这里就从实际需求的角度来归纳一些纯CSS方案。【特别说明,现实中的需求千变万化,请阅者根据实际需求】

 

文本内容的垂直居中这是一个烂大街的需求,比如在页面中某一块内容的标题上和单行列表上就会有用到。如下图:

从项目需求角度,使用纯CSS方案解决垂直居中

现在我们就假设需要在一个宽400px,高32px的div上,使里面的一行文字垂直居中,主要效果如下图:

从项目需求角度,使用纯CSS方案解决垂直居中

实现上面需求的HTML代码如下:

<div ><span>标题标题</span></div>

原标题:从项目需求角度,使用纯CSS方案解决垂直居中

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。