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