者:薔薇Nina
原文:https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里,標簽位置居中一直是困擾Web前端的難題。在本文中,我對這類問題進行了探究和給出了幾點建議,供讀者參考。
在父級標簽中使用 text-align: center。
效果:
如果是單行,則為該標簽設置行高(line-height)且與其父級標簽 height 相等即可。
效果:
如果是多行,稍微有點麻煩,需要在該標簽設置 display: table-cell 和 vertical-align: middle,在其父級標簽設置 display: table。
效果:
方法一:在父級標簽中使用 flex 彈性盒子。
效果:
方法二:在該標簽中使用 margin 屬性。
效果:
在父級標簽中使用 flex 彈性盒子。
效果:
總結:對于行內標簽居中,優先考慮文本對齊(text-align)和顯示單元格(table-cell);對于塊標簽居中,優先考慮顯示彈性盒子(flex)。
例
將 HTML 網頁中的文本進行水平居中處理:
<center>這個文本居中對齊。</center>
瀏覽器支持
所有主流瀏覽器都支持 <center> 標簽。
標簽定義及使用說明
HTML5 不支持 <center> 標簽。請用 CSS 代替。
在 HTML 4.01 中,<center> 元素 已廢棄。
<center> 對其所包括的文本進行水平居中。
提示和注釋
提示:請使用 CSS 樣式來居中文本!在 CSS 教程中您能了解到更多關于居中文本的細節。
HTML 4.01 與 HTML5之間的差異
HTML5 不支持 <center> 標簽,HTML 4.01 已廢棄 <center> 標簽。
標準屬性
在 HTML 4.01 中,<center> 標簽支持如下標準屬性:
屬性 | 值 | 描述 |
---|---|---|
class | classname | 規定元素的類名 |
dir | rtlltr | 規定元素中內容的文本方向 |
id | id | 規定元素的唯一 id |
lang | language_code | 規定元素中內容的語言代碼 |
style | style_definition | 規定元素的行內樣式 |
title | text | 規定元素的額外信息 |
如需完整的描述,請訪問標準屬性。
事件屬性
在 HTML 4.01 中,<center> 標簽支持如下事件屬性:
屬性 | 值 | 描述 |
---|---|---|
onclick | script | 當鼠標被單擊時執行腳本 |
ondblclick | script | 當鼠標被雙擊時執行腳本 |
onmousedown | script | 當鼠標按鈕被按下時執行腳本 |
onmousemove | script | 當鼠標指針移動時執行腳本 |
onmouseout | script | 當鼠標指針移出某元素時執行腳本 |
onmouseover | script | 當鼠標指針懸停于某元素之上時執行腳本 |
onmouseup | script | 當鼠標按鈕被松開時執行腳本 |
onkeydown | script | 當鍵盤被按下時執行腳本 |
onkeypress | script | 當鍵盤被按下后又松開時執行腳本 |
onkeyup | script | 當鍵盤被松開時執行腳本 |
如需完整的描述,請訪問事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
● ●
在網頁上使 HTML 元素居中看似一件很簡單的事情. 至少在某些情況下是這樣的,但是復雜的布局往往使一些解決方案不能很好的發揮作用。
在網頁布局中元素水平居中比元素垂直居中要簡單不少,同時實現水平居中和垂直居中往往是最難的。現在是響應式設計的時代,我們很難確切的知道元素的準確高度和寬度,所以一些方案不大適用。據我所知, 在CSS中至少有六種實現居中的方法。我將使用下面的HTML結構從簡單到復雜開始講解:
<div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div>
鞋子圖片會改變,但是他們都會保持500px
X500px
的大小。 HSL colors 用于使背景顏色保持一致。
有時顯而易見的方案是最佳的選擇:
div.center { text-align: center; background: hsl(0, 100%, 97%);
}
div.center img { width: 33%; height: auto;}
這種方案沒有使圖片垂直居中:你需要給<div>
添加padding
或者給內容添加margin-top
和margin-bottom
使容器與內容之間有一定的距離。
這種方式實現水平居中和上面使用text-align的方法有相同局限性。
div.center { background: hsl(60, 100%, 97%);}
div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}
注意: 必須使用display: block
使margin: 0 auto
對img
元素生效。
使用 display: table-cell
, 而不是使用table
標簽; 可以實現水平居中和垂直居中,但是這種方法需要添加額外的元素作為外部容器。
<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>
CSS:
.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}
.center-core img { width: 33%; height: auto;}
注意:為了使div
不折疊必須加上width: 100%
,外部容器元素也需要加上一定高度使得內容垂直居中。給html
和body
設置高度后,也可以使元素在body
垂直居中。此方法在IE8+瀏覽器上生效。
這種 方案 有非常好的跨瀏覽器支持。有一個缺點就是必須顯式聲明外部容器元素的height
:
.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
Stephen在他的 博客 中演示了這種方案的幾種變化。
Chris Coiyer 提出了一個使用 CSS transforms 的新方案。 同樣支持水平居中和垂直居中:
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}
但是有以下幾種缺點:
CSS transform 在部分就瀏覽器上需要使用 前綴。
不支持 IE9 以下的瀏覽器。
外部容器需要設置height
(或者用其他方式設置),因為不能獲取 絕對定位 的內容的高度。
如果內容包含文字,現在的瀏覽器合成技術會使文字模糊不清。
當新舊語法差異和瀏覽器前綴消失時,這種方法會成為主流的居中方案。
.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}
在很多方面 flexbox 是一種簡單的方案, 但是它有新舊兩種語法以及早期版本的IE缺乏支持 (盡管可以使用 display: table-cell
作為降級方案)。
現在規范已經最終確定,現代瀏覽器也大都支持,我寫了一篇詳細的教程 教程。
在某些情況下比flexbox更全面:
.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}
很簡單,calc
允許你基于當前的頁面布局計算尺寸。在上面的簡單計算中, 50% 是容器元素的中心點,但是如果只設置50%會使圖片的左上角對齊div
的中心位置。 我們需要把圖片向左和向上各移動圖片寬高的一半。計算公式為:
top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));
在現在的瀏覽其中你會發現,這種方法更適用于當內容的寬高為固定尺寸:
.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }
我在 這篇文章 中詳細講解了calc
。
這種方案和flex一樣有許多相同的缺點: 雖然在現代瀏覽器中有良好的支持,但是在較早的版本中仍然需要瀏覽器前綴,并且不支持IE8。
.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}
當然還有 其他更多的方案。理解這六種方案之后,web開發人員在面對元素居中的時候會有更多的選擇。
關注“網頁設計自學平臺”訂閱號回復以下|關鍵字|
|dw教程|js教程|淘寶案例|軟件下載|搜狐案例|網站模板
|ps教程|ai教程 |ui教程|騰訊案例| ae教程 |字體下載|
|上課素材|前端特效|華潤萬家案例|最新dw案例|
戳“閱讀原文”入群獲取最新高清前端視頻!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。