CSS属性：vertical-align
由于懒，做项目写css的时候都比较随意，一下子实现不了的效果就用其他属性一个个去试试，大多数的时候也倒能实现效果，但这次碰到的一个问题怎么试都试不出，之后问了别人才解决。而碰到的这个坑，就是vertical-align。就是写个分页的按钮。结构大致为：
CSS为外面的大div往右浮动 没有设置宽和高、而span的CSS为：
然后出现的效果变成了这样：
。。。
任凭我在div中加line-height、vertical-align，中间的文字死活居中不了。。。于是请教别人。他在span中就加了个vertical-align，立马就好了。于是我回头再在w3s上看了vertical-align的介绍。内容为：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
也就是说 它只是个适用行内元素的属性。也难怪在w3s上也就举了个很简单的图片的例子（但其实这个例子也已经说的很明确了）。而如果将元素的display设置为inline/inline-block的话，就可以使用了 。在我遇见的这个例子中，我仅仅关注了文字的高度，其实，文字代表了这个div的基线。所以，改变vertical-align的数值就能改变span相对于他所在行的高度也就是这个div。在给span加了vertical-align：text-top后，排版也就正常了。
评论(2)