CSS的垂直对齐是什么意思？

html-css020

CSS的垂直对齐是什么意思？,第1张

垂直对齐就是相对于外部容器垂直方向的对齐方式，如下三种方式：

1、垂直居中对齐：

css：vertical-align:middle

示例：

2、垂直底部对齐：

css：vertical-align:bottom

示例：

3、垂直顶部对齐：

css：vertical-align:top

示例：

vertical-align是什么？

设置元素的垂直对齐方式。

注意点：

text-align是设置给需要对齐元素的父元素，

vertical-align是设置给需要对齐的那个元素本身，

vertical-align只对行内元素有效。

/*默认情况下图片和一行文字的基线对齐，

基线就是一行文字中最短那个文字的底部*/

vertrical-align:baseline

/*图片和父元素的顶部对齐*/

vertrical-align:top

/*图片和父元素的底部对齐*/

vertrical-align:bottom

/*图片和一行文字的顶部对齐*/

vertrical-align:text-top

/*图片和一行文字的底部对齐*/

vertrical-align:text-bottom

    vertical-align: middle

是说这个属性么

这个属性严格意义上说并不是垂直居中

它只是让行内元素（文字和图片等）以自身为参照中对齐（top是顶对齐）

但这个参照不是绝对的，他受行高等因素影响(及浏览器的兼容)所以设置了对齐以后往往达不到自己想要的结果。

浏览器的垂直居中是个挺麻烦的事，简单的文字图片的对齐 可以用vertical-align，但稍微复杂点的就不好使啦

通常会用js计算高度在设置其他属性让目标元素居中

目前为止只有table的垂直居中属性 是真正意义上 且不需要js的垂直居中