css圖片居中(css如何使圖片居中)

CSS圖片居中的方法:1、利用“text-align: center;”樣式;2、利用“margin: 0 auto;”樣式;3、利用彈性盒布局;4、利用柵格布局;5、利用絕對定位中對齊;6、利用background屬性,實現背景圖片居中。

本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

html

<pid="pic"><imgsrc=star.jpgclass="logo"></p>

一、(最簡單)文本屬性對齊text-align

text-align控制元素中文本行的對齊方式?？梢栽趇mg設一個父輩的p,這樣img就可以是p的文本,然后用text-align修改p屬性。(在父輩元素添加屬性)

注意:子元素必須是inline或inline-block;如果子元素也是p的話,需要給子元素設置display:inline/inline-block. 這里子元素img是inline所以省略這一步。該方法適用于inline元素上。比如img的居中

css

#pic{text-align:center;/*表示p的子元素居中*/}

二、巧用margin

css

img{display:block;width:100px;margin:0auto;}

以上三點缺一不可。

margin: 0 auto;居中的前提是:

• 內行元素必須要設置成display: block; img是行內元素必須得設置。如果是input可以不設置。

• 元素必須要有寬度;自帶寬度的除外,比如button和input等。

根據前提,還可以有另一種方法-修改父元素屬性

#pic{width:100px;margin:0auto;}/*父元素p屬于block,所以不用再設display:block;*/

綜上所屬,該方法適用于block元素上。比如p、input的居中

margin的局限:一行顯示兩個圖片時,margin需要相應修改。

三、彈性盒布局

css

#pic{display:flex;justify-content:center;}

彈性盒布局可以使用少數幾行css實現幾乎所有的布局。而且最神的是,即便是n個圖片上面兩行都可以實現居中,而不必考慮圖片布局和位置。

四、柵格布局

彈性盒用在導航欄是最普遍的。與之相比,柵格布局是普適的布局系統。

#pic{display:grid;align-items:center;/*塊級方向(縱向)上的全部柵格元素居中對齊*/justify-items:center;/*行內方向(橫向)所有的元素中線對齊*/}

所以能夠非常方便的處理多張圖片對齊的問題。

五、絕對定位中對齊

css

#pic{position:relative;/*設置絕對定位元素(img)的容納塊,如果不設置,那么容納塊默認為body*/}.logo{position:absolute;right:1em;left:1em;//表示左右距離相等margin:0auto;//與方法二相似}

與方法二最大的區別是,margin的用法是針對block元素的。如果用position就不需要設置block 了。但是position一般用在框架布局上,如果只是圖片居中有點大材小用,比較麻煩。不建議。

六、背景圖片居中

html

<p></p>

css

p{height:1000px;/*高度非常重要*/background:url(star.jpg)no-repeattopcenter;}

前提:只要元素內容是空的,就必須設置高度。因為p內容是空的,所以必須要設置高度,否則p是沒有空間的,那背景圖片自然也不會顯示。如果是body就不用,因為body自帶高度。

設置為背景圖片的局限性是無法設置超鏈接、title、alt等圖片的屬性。如果不是背景圖片,盡量不要用這種格式。

感謝你能夠認真閱讀完這篇文章,希望小編分享的“css如何使圖片居中”這篇文章對大家有幫助,同時也希望大家多多支持本站,關注本站行業資訊頻道,更多相關知識等著你來學習!