html 居中布局

2021-06-18 22:23:52 字數 869 閱讀 7480

需求,有三個內容需要居中顯示

內容居中,我們太熟悉了:)

.content1,.content2,.content3

這樣,三個內容都居中了。然後,當content1 內容裡面的h1,距離頂部有50個畫素的時候,怎麼寫?

第一反應,用margin

.title
但是,緊鄰的塊級元素會發生margin collapse 。這樣導致的實際效果是content1的div具體上面50px。怎麼辦?還有別的辦法嗎?

在content1 用padding

.content1
這樣會發現,content1 內容寬變成960+50。根據盒模型,不要忘了。,如果堅決要用這個方法,可以如下寫:

.content1
效果是能達到,但是,如果頁面有很多這樣的元素,你將花大量的時間去計算width-padding 。

其實還有更好的辦法:

改一下html結構:

用content 來讓所有內容居中

.content

通過content1 的padding 屬性,實現title距離頂部50px

.content1

content1 ,content2,content3 通過瀏覽器自動計算寬度,從而就避免繁瑣的計算

xiong:計算寬度實在太費腦力,多利用塊級元素會自動延展的特性

html中的混合布局居中

一.適用較大的 html body中的結構 class index item0 class img1 show index class img 0 1 class img img src img 0 car.png div div class div text index class h5 titl...

L 居中布局

先給出html結構 我是子元素 par child將子元素設定為inline block這樣既可以像塊元素一樣設定盒模型,又可以像行內元素一樣試用text align center進行居中 將子元素設定為inline block後,子元素為塊級元素,寬度為內容寬度 par childtable元素是...

CSS 居中布局

居中在平時的運用很多,以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度,已知子元素寬度 高度.con...