div居中 div水平居中代碼
在設(shè)計網(wǎng)頁的時候，經(jīng)常需要居中，比如我設(shè)計了一張圖片，我需要放圖片中間，如果單純用代碼調(diào)用，這個圖片肯定是接著圖片的，那么如何居中呢？下面我們演示代碼。
有很多種辦法，我們一種一種談。
第一種使用DIV布局，也就是用CSS代碼來居中，我們可以看下面代碼。
.main{ text-align: center; /*這里設(shè)置居中文字或者更換為圖片代碼*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
這段代碼，是讓里面的文字居中或者圖片居中，我們需要設(shè)置CSS也就是這段文字居中的具體數(shù)值，通過TOP LEFE等來設(shè)置，目前來看設(shè)置的是border-radius: 20px; width: 300px; height: 350px;
第二種辦法：設(shè)置圖片居中。
Img是內(nèi)聯(lián)元素，要設(shè)置其margin屬性使其居中，就要將其轉(zhuǎn)換為塊元素display:block;然后利用margin:0 auto;實現(xiàn)圖片的水平居中；（有的設(shè)計師為圖片再加個div標簽，然后通過div標簽的margin實現(xiàn)居中）。
如果圖片在div中下的span屬性中，必須轉(zhuǎn)換成display：block；然后padding-top:10px。
第三者直接把代碼加入到你的代碼里。
<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="img/baidu_jgylds3.gif" style="margin: 0 auto;" />
</div>
上面這段代碼來看，是調(diào)用了一張圖片。，默認已經(jīng)設(shè)置好了居中代碼，咱們只需要在你的需要居中的文檔前加入
<div style="text-align: center; width: 500px; border: green solid 1px;">
然后在到你需要居中的文字或者圖片后加入
</div>即可，這種方式比較簡單適合所有人。
其實不管任何方式的居中，你都需要在代碼里直接用代碼實現(xiàn)，或者調(diào)用CSS實現(xiàn)，所以，你可以在網(wǎng)上尋找居中代碼，在你代碼2頭加入你需要居中的代碼即可，這個不行換一個，一般都可以實現(xiàn)。
0 Comments.