問(wèn)題描述

html代碼如下：css代碼如下：

然后我現(xiàn)在出來(lái)是這個(gè)效果

效果圖是這樣的：

文字顏色還有標(biāo)題和文字之間間距可以忽略。。就是想問(wèn)一下下面的圖片和文字如何居中。我之前設(shè)置width的像素可以達(dá)到居中效果，但是背景色就不能鋪滿，然后使用width：100%之后就無(wú)法居中了。之前使用的margin 0 auto失效，然后嘗試text-align:center也沒(méi)有效果。請(qǐng)問(wèn)大家有沒(méi)有什么好的方法解決。

問(wèn)題解答

對(duì)于你的這種情況元素居中有兩種方法：

flex布局：

.team{ width:950px; height:470px; background:#2e2e2e; display: flex; align-items: center; justify-content: center; }

2.transfrom來(lái)居中

在.team中加入：position: relative;在dl標(biāo)簽里加入： position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

參考鏈接：transform居中

你把三個(gè)dl用box包括起來(lái)給他固定寬,讓box margin:0 auto就可以了

外層再給一個(gè)標(biāo)簽，用于width:100%加背景色鋪滿；里面這個(gè).team給個(gè)固定的寬，然后margin:0 auto；

第一 是先實(shí)現(xiàn)一個(gè)正常的背景p 默認(rèn)不需要加寬第二，中間內(nèi)容區(qū)給個(gè)寬度然后margin:0 auto