align含義以及里面包含的屬性?
一.text-align屬性
1.text-align用來設置元素中的的文本對齊方式,例如:如果需要設置圖片的對齊方式,需要設置圖片的父元素的text-align屬性;
2.text-align只對文本有效,對元素無效,不能設置元素的對齊方式;
3.表格元素td是屬于inline-block,可以使用text-align設置td中的文本對齊方式;
二.水平居中和垂直居中
1.水平居中
(1) 文本、圖片等行內元素的水平居中
給父元素設置text-align:center可以實現文本、圖片等行內元素的水平居中。
(2) 確定寬度的塊級元素的水平居中通過設置margin-left:auto;和margin-right:auto;來實現的。
(3) 不確定寬度的塊級元素的水平居中
方法一:
使用table標簽,table本身并不是塊級元素,如果不給它設定寬度的話,它的寬度由內部元素的寬度“撐起”,但即使不設定它的寬度,僅設置margin-left:auto;和margin-right:auto;就可以實現水平居中!
將需要居中的部分包含在table標簽內,對table設置margin-left:auto;和margin-right:auto;就可以使table水平居中,間接使需要居中的部分水平居中。
缺點:增加了無語意標簽,加深了標簽的嵌套層數。
方法二:
改變塊級元素display為inline類型,然后使用text-align:center來實現居中。
較方法一,好處是不用增加無語義標簽,簡化了標簽的嵌套深度。壞處,將塊級元素的display類型改為inline,缺少了一些塊級元素的功能,比如高寬。
方法三:
通過給父元素設置float,然后父元素設置position:relative和left:50%,子元素設置position:relative和left:-50%來實現水平居中。
可以保留塊級元素仍以display:block的形式顯示,而且不添加無語義標簽,不增加嵌套深度,但缺點是設置了position:relative,帶來一定的副作用。
2.垂直居中
(1) 父元素高度不確定的文本、圖片、塊級元素的垂直居中
通過給父容器設置相同上下邊距實現的,即設置padding-top和padding-bottom。
(2)父元素高度確定的單行文本的垂直居中
通過給父元素設置line-height來實現,line-height值和父元素高度值相同。
(3)父元素高度確定的多行文本、圖片、塊級元素的垂直居中
CSS中有一個用于垂直居中的屬性vertical-align,但只有當父元素為td或者th時,這個屬性才生效,對于其他塊級元素,如div,p等,默認情況下是不支持vertical-align屬性的。在firefox和ie8下,可以設置塊級元素的display:table-cell來激活vertical-align屬性,但ie6和ie7并不支持display:table-cell。
方法一:
直接使用table,因為td標簽默認下就隱式設置了vertical-align:middle。
方法二:
對支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle來實現居中,對不支持display:table-cell的ie6和ie7,使用特定格式的hack。