文章詳情頁(yè)
css - 如果自動(dòng)獲取寬度并居中?
瀏覽:283日期:2023-01-28 14:01:44
問(wèn)題描述
如圖,三個(gè)標(biāo)簽的地方,標(biāo)簽數(shù)量不一定,并且標(biāo)簽的字?jǐn)?shù)也是不一定,因此總體的寬度也是不一定的,有什么辦法讓這這些標(biāo)簽自動(dòng)居中嗎?使用margin:0 auto; width:auto;的結(jié)果是寬度表成了百分之百,設(shè)置flote:left;的效果雖然寬度自動(dòng)適應(yīng)了但是不能居中
問(wèn)題解答
回答1:給標(biāo)簽的父級(jí)容器添加css樣式:display:flex; justi-content:center;
代碼示例:
.test{display: flex;justify-content: center; } p{background: gray;margin: 0 10px;border-radius: 2px;padding: 0 10px; }
<p class='test'> <p>111</p> <p>222</p> <p>333</p></p>回答2:
三個(gè)標(biāo)簽的父級(jí)元素加text-align: center
標(biāo)簽:
CSS
上一條:css3動(dòng)畫(huà) - Canvas、Css3、動(dòng)畫(huà)高手請(qǐng)進(jìn)Html5問(wèn)題請(qǐng)教下一條:html5 - 畢業(yè)設(shè)計(jì)是H5相冊(cè),怎么和JavaEE結(jié)合
相關(guān)文章:
1. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. 我何時(shí)應(yīng)該在Java中使用JFrame.add(component)和JFrame.getContentPane()。add(component)4. docker - 如何修改運(yùn)行中容器的配置5. docker鏡像push報(bào)錯(cuò)6. html5和Flash對(duì)抗是什么情況?7. javascript - 請(qǐng)指條明路,angular的$event,在select中卻是undefined?8. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)!9. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????10. phpstudy8.1沒(méi)集成mysql-front
排行榜

熱門標(biāo)簽
網(wǎng)公網(wǎng)安備