行內元素和塊級元素的垂直居中,水平居中

2021-10-10 13:34:40 字數 649 閱讀 6386

一、行內元素

1、行內元素的水平居中:給父級元素使用屬性text-align:center

2、行內元素的垂直居中:給父級元素使用屬性line-hight:父元素盒子的高度

二、塊級元素

1、塊級元素的水平居中:給子級元素使用屬性margin:0 auto

2、行內元素的水平垂直居中,有四種方法:

html**如下:

>

class

="outer"

>

class

="inner"

>

div>

div>

body

>

css**如下:

a、第一種:

.outer

.inner

b、第二種:

.outer

.inner

c、第三種:

.outer

.inner

d、第四種

.outer

.inner

行內元素與塊級元素垂直居中

行內元素的垂直居中 1.給塊級元素中的想要居中的行內元素設定 vertical align middle 這表示這些行內元素是以它們各自的中間的位置來與其他行內元素對齊的 若還是沒對齊的話,可通過在這些行內元素的父元素中設定line height 來調節.2.若行內元素的父元素高度不定,可通過設定行...

行內元素和塊級元素水平及垂直居中問題

首先,介紹一下行內元素和塊級元素,這個很重要,因為有的屬性只能用於塊元素,而有的正好相反,在一定的情況下,它們也可以相互轉換,比如用display來進行設定。行內元素 不佔據一整行,隨內容而定,有以下特點 不可以設定寬高,也不可以設定行高,其寬度隨著內容增加,高度隨字型大小而改變。內聯元素可以設定外...

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...