pc端常見布局 水平居中布局 單元素定寬

2022-06-18 12:18:08 字數 1354 閱讀 9798

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>常見元素布局

title

>

<

style

type

="text/css"

>

/*一、水平居中布局

*//*

1.單個元素水平居中 寬度固定 最常用

*/.box

style

>

head

>

<

body

>

<

div

class

="content"

>

<

div

class

="box"

>

寬度固定

div>

div>

body

>

html

>

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>常見元素布局

title

>

<

style

type

="text/css"

>

/*一、水平居中布局

*//*

1.單個元素水平居中 寬度固定 定位居中布局

*/.content

.box

style

>

head

>

<

body

>

<

div

class

="content"

>

<

div

class

="box"

>

寬度固定

div>

div>

body

>

html

>

效果:

pc端常見布局

1.固定寬度三列布局 html結構如下 右側主要內容區域 主要內容區域的主要內容 主要內容區域中的次要內容 左側導航區 css布局如下 為了讓容器元素水平居中,因ie6混雜模式下不識別margin 0 auto宣告,而text align center,ie會理解為讓所有的東西居中,而不只是文字,此...

居中布局之水平垂直布局

命題 如下不定寬高的父元素與子元素 div class parent div class child demo div div 問題一 使子元素水平居中 方案1 child進行相容 parent 優點 瀏覽器相容性好 缺點 子元素會繼承文字居中特性,故如不希望子元素中文字居中,可對子元素設定 方案2...

CSS 布局 水平居中

一 水平居中 1 行內元素水平居中 父級元素設定text align center 實現在塊級元素內部的行內元素 inline inline block inline flex inline table 水平居中 dome 由此可見,塊級裡面的塊級元素水平居中也可以先把裡面的塊級設定成行內塊元素2 ...