首頁猿問怎么居中顯示一個(gè)自適應(yīng)寬高的div？

怎么居中顯示一個(gè)自適應(yīng)寬高的div？

Html/CSS

yangwwei 2016-04-13 23:48:45

比如有個(gè)一個(gè)div。。里面包含著一個(gè)img元素。。如何使得這個(gè)div的寬高自適應(yīng)。。而且使得div在屏幕中居中顯示？？

查看完整描述

6 回答

穎子黑豆

TA貢獻(xiàn)9條經(jīng)驗(yàn) 獲得超7個(gè)贊

可以設(shè)置display:inline 然后設(shè)置text-align:center

2 反對回復(fù) 2016-04-15

淡雅的默

TA貢獻(xiàn)102條經(jīng)驗(yàn) 獲得超139個(gè)贊

div{width:auto;margin:auto;height:auto; position:relative}

1 反對回復(fù) 2016-04-14

yangwwei
你好。。這樣好像并不能解決問題啊。。下面的不能達(dá)到效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{margin:0px;padding:0px;font-size:15px;} ul,ol{list-style: none ;} #box{width:auto;margin:auto;height:auto; position:relative;} </style> <body> <div> <div id="box"> <ul> <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li> </ul> </div> </div> </body> </html>

回復(fù) 2016-04-14
淡雅的默
#box { width:auto; max-width:490px; margin:auto; height:auto; position:relative; }

回復(fù) 2016-04-14

qq_夢繁花會(huì)開_0

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超1個(gè)贊

position:absolute就是脫離正常文本流了，沒有辦法撐起父元素的寬高。

1 反對回復(fù) 2016-04-14

猿小天

TA貢獻(xiàn)5條經(jīng)驗(yàn) 獲得超0個(gè)贊

高度要設(shè)置多少像素，寬度用auto

反對回復(fù) 2016-04-14

一毛錢

TA貢獻(xiàn)156條經(jīng)驗(yàn) 獲得超57個(gè)贊

{margin:0px?auto}

反對回復(fù) 2016-04-14

關(guān)注