div布局及垂直問題筆記

2021-04-13 00:46:27 字數 1814 閱讀 4665

float浮起的div是在本行內的,不會產生換行。

普通div則在本行內生成,並且末尾要產生換行。

如果出現了普通div,則跳到下一行,即使後面有float浮起,也是在下一行浮起。

今天碰到個很棘手的問題,div本身沒有定義自己居中的屬性,

網上很多的方法都是介紹用上級的text-align: center然後巢狀一層div來解決問題.

可是事實上這樣的方法科學嗎?

經過網路搜尋和親自實驗得出以下結論:

正確的也是對頁面構造沒有影響的設定如下:

對需要水平居中的div層新增以下屬性:

margin-left: auto;

margin-right: auto;

經過這麼一番設定問題似乎解決了,在ff中已經居中了,可是在ie中看竟然還是沒有居中!

鬱悶了一下午,就是找不出問題所在,還特地比較了網上的文章竟然一模一樣.

問題到底出在**呢?

感謝網友樂天無用幫忙找出了這個邪門問題的原因.

原來是l-blog預設沒有在html前加上dtd,於是ie就以html而不是xhtml來解釋文件.

問題並不在css而在xhtml網頁本身.

需要加上這樣的**才能使得上述設定有效果:

如果您希望更為嚴格的xhtml 1.0 strict或者xhtml 1.1請查閱相關文件.

以上測試均基於windows xp sp2版ie6和firefox 1.0最終版.

如何使div居中

主要的樣式定義如下:

[code]body 

#center 

說明:首先在父級元素定義text-align: center;這個的意思就是在父級元素內的內容居中;對於ie這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「margin-right: auto;margin-left: auto; 」

需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在乙個div裡,你可以依次拆出多個div,只

要在每個拆出的div裡定義margin-right: auto;margin-left: auto; 就可以了。

如何使在div 中垂直居中

<div>

<div>

<div>

div

divimg 

用背景的方法。舉例:

body 

關鍵就是最後的center,這個引數定義的位置。還可以寫成「top left」(左上角)或者"bottom right"等,也可以直接寫數值"50 30"

如何使文字在div中垂直居中

果是文字,便不能用背景方法,可以用增高行距的辦法變通實現垂直居中,完整**如下:

test content

說明:vertical-align:middle;表示行內垂直居中,我們將行距增加到和整個div一樣高line-height:200px;然後插入文字,就垂直居中了。

css+div控制頁面中元素垂直居中** 全域性和區域垂直居中

另一方法:

DIV布局之道一 DIV塊的水平併排 垂直併排

iv布局網頁元素的方式主要有三種 平鋪 併排 巢狀 覆蓋 遮擋 本文先講解平鋪 併排 方式。1 垂直平鋪 垂直排列 請看如下 css部分 css code 複製內容到剪貼簿 lay1 lay2 lay3 html部分 xml html code 複製內容到剪貼簿 divclass lay1 div ...

div水平居中及div水平垂直居中的方法總結

1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...

CSS垂直居中布局問題

最近總被這玩意坑,面試官也老愛問,還有別的方式嗎 1 使用絕對定位 元素在過度受限情況下,將margin設定為auto,瀏覽器會重算margin的值,過度受限指的是同時設定top bottom與height或者left right與width 有點需要注意的是,設定子元素的寬度高度。123 html...