CSS居中總結

2022-09-13 21:03:31 字數 1707 閱讀 9748

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

body

.div1

.div2

.spcenter

.div3

.div4

.div5

imgul

ul li

style

>

head

>

<

body

>

<

p>水平居中

p>

<

div

class

="div1 spcenter"

>

<

div

class

="div2 spcenter"

>

div>

div>

<

hr/>

<

p>的垂直居中

p>

<

div

class

="div3"

>

div>

<

hr/>

<

p>針對文字短的文字的垂直居中

p>

<

div

class

="div4"

>

<

span

>這真的是文字的垂直居中

span

>

div>

<

hr/>

<

p>文字與、按鈕、導航的垂直居中

p>

<

div

class

="div5"

>

<

span

>與文字垂直居中

span

>

<

input

type

="text"

/>

<

img

src="no**atar_big.gif"

alt=""

/>

<

ul>

<

li>qwe

li>

<

li>wer

li>

<

li>ert

li>

ul>

div>

body

>

html

>

**執行如下

css 居中總結

1.定寬塊狀元素 水平居中 divstyle 2.不定寬塊狀元素 水平居中 wrap class wrap 設定我所在的div容器水平居中 div 2.display inline textalign center 它將塊狀元素的 display 型別改為 inline,變成了行內元素,所以少了一些...

css居中總結

給父元素設定 text align center 但對浮動元素,絕對定位元素無效設定margin 0 auto 將塊級元素display設定為inline,然後使用text align center 給父元素設定float,position relative,left 50 子元素設定positio...

css居中總結

1.我們可以通過給該元素的父級設定margin 0 auto的方式來實現。html class parent class child center div div css child此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的,其缺點是需要設定子元素的寬度。2.通過pos...