html中div水平居中 如何在一個DIV盒子里將圖片居中,除了用margin?
如何在一個DIV盒子里將圖片居中,除了用margin?p { display:table-cellwidth:134pxheight:134px line-height:134pxborder:1px
如何在一個DIV盒子里將圖片居中,除了用margin?
p { display:table-cellwidth:134pxheight:134px line-height:134pxborder:1px solid #dededevertical-align:middletext-align:center
*display: block
*font-size: 175px/*約為高度的0.873,200*0.873 約為175*/
*font-family:Arial/*防止非utf-8引起的hack失效問題,如gbk編碼*/}
p img {padding:2pxvertical-align:middle max-width:126pxmax-height:126pxwidth:expression(this.width>126&&this.width>this.height?126:this) height:expression(this.height>120?120:this) }
這個是未知高度圖片 垂直居中
{ vertical-align:middle
max-width:120px
max-height:120px
width:expression(this.width>120&&this.width>this.height?120:this)
height:expression(this.height>120?120:this)
margin-top:expression((120-this.height ) / 2) } 這個也可以試一下~
CSS中怎么讓圖片在盒子里居中呢?
可以為盒子添加“text-align: center”樣式使圖片在盒子中居中。
1、新建html文檔,在body標簽中添加一個div盒子,然后在這個div盒子中添加一張圖片:
2、為div盒子和圖片添加一些樣式,這時默認情況下圖片會向盒子的左上角對齊:
3、為div盒子添加“text-align: center”樣式,這時圖片會在div盒子中居中對齊: