網絡設計:css中元素水平居中顯示的方法

使用CSS來居中元素並不是一件簡單的事情。相同的CSS居中設置在不同的瀏覽器中具有不同的性能。本文介紹了幾種在CSS中水平顯示元素的常用方法。

1.使用自動外邊距實現居中

在css中水平居中元素的首選方法是使用邊距屬性設置元素的左鍵和右鍵屬性為自動。在實際應用中,我們可以為這些需要中心的元素創建一個div容器。需要特別注意的是,必須為容器規定寬度:

在大多數主流瀏覽器中,這種方法非常有效。甚至windows平台上的ie6也可以在其標准兼容性模式下正常顯示。不幸的是,在ie的較低版本中,這個設定並沒有達到中心效果。因此,如果要在實際項目中使用此方法,必須確保用戶的ie瀏覽器版本不小於6.0。

雖然在支持方面不盡如人意,但大多數設計師建議盡可能使用這種方法。在用CSS實現元素水平居中的各種方法中,該方法也被認為是最正確和合理的方法。

2.使用文本索引的中心

實現元素居中的另一種方法是使用text-align屬性,將屬性的值設置為居中並將其應用於body元素。這種方法是完全破解,但它與大多數瀏覽器兼容,因此在某些情況下很自然。

黑客攻擊的原因是這個方法不將文本屬性應用於文本,而是將元素作為容器。這也給我們帶來了額外的工作。在為布局創建了必要的DIV之後,我們對主體應用文本對齊屬性,如下所示:

接下來會發生什么?身體的所有後代元素都是中心的。

因此,我們需要編寫另一個規則來將文本返回到默認的左對齊:

可以想象,這個附加規則會給您帶來一些不便。此外,真正符合標准的瀏覽器不會改變容器的位置,只會使文本居中。

網頁設計出色,會直接幫助你的網站或品牌發展,絢爛的色彩也使是你們接受

3.結合自動外緣和文本對齊

因為文本對齊居中方式有著良好的向下兼容性,且自動外邊距方式也被大多數當代瀏覽器支持,所以很多設計師將二者組合起來使用,以期讓居中效果得到最大限度的跨瀏覽器支持:

但它總是一個黑客,而且無論如何也不完美。我們仍然需要為中間容器中的文本編寫額外的規則,但至少在每個瀏覽器中它們看起來都不錯。

4.負外距離溶液

負的外部利潤率解決方案不僅僅是為元素添加負的外部利潤率。這種方法需要絕對定位和負的外緣。

下面是該方案的具體實現方法。首先,創建一個包含居中元素的容器,然後將其絕對定位於相對頁面左邊邊緣50%的位置。這樣,該容器的左外邊距將從頁面50%寬度的位置開始算起。

然後,將容器的左外緣設置為負容器寬度的一半。這將在水平方向上將容器固定在頁面的中點。

雖然這不是首選的解決方案,但它也是一種很好的方法,並且用途極為廣泛。

相關文章:
網站不需要在所有瀏覽器中呈現相同的內容ccvi
使圖標在網頁設計中更具吸引力
網站設計分析,以吸引用戶平面界面設計
設計內容和標題
使用工具參與創建過程,以檢測錯誤並減小文件大小

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

qinfeny

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。