css元素的水平,豎直居中

2021-07-10 16:25:53 字數 966 閱讀 8835

一、水平居中

1.文字水平居中:給父級元素設定text-align:center;

2.確定寬度的塊級元素居中:margin:0 auto;(margin-left,margin-right=0)

3.不確定寬度的塊級元素的居中:

(1)用table幫助實現不確定寬度塊級元素居中

塊級元素

設定table元素margin:0 auto;

(2)設定父級元素text-align:center;然後自身display:inline;

(3)父元素設定float:left;position:relative;left:50%;自身設定position:relative;left:-50%;

二、豎直居中

1.父級元素高度確定的單行文字:

給父級元素設定行高等於父級元素高度(line-height=height);

2.父元素高度不確定的文字、、塊級元素的垂直居中:給父級元素設定相同的padding(padding-top=padding-bottom);

3.父元素高度確定的多行文字、、塊級元素的豎直居中:

(1)vertical-align屬性只有在父元素為td、th時才生效,其它元素預設不支援vertical-align;在firefox和ie8下可以設定display:table-cell,來啟用                  vertical-align屬性,當時ie6、7不支援display:table-cell,所以我們用最原始的笨辦法,直接使用**

元素   td預設設定了vertical-align:middle;

(2)firefox和ie8用vertical-align:middle;display:table-cell;在ie6、7中用hack;

.wrap

.verticalwrap

.vertical

css 元素水平 豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 設定自身margin left auto margin right auto 別忘了設定自身寬度 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設...

css 元素水平 豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 設定自身margin left auto margin right auto 別忘了設定自身寬度 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設...

css水平豎直居中方式

css水平和垂直居中的幾種實現方法 1 單行垂直居中 文字在層中垂直居中vertical align 屬性是做不到的.我們這裡有個比較巧妙的方法就是 設定height的高度與line height的高度相同 2 層水平居中 設定div的寬度小於父div的寬度,設定 margin 0 auto 即可讓...