首頁 > 開發者 > CSS

DIV+CSS中讓布局置中_背景圖片置中_文字內容置中

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
1、首先介紹使用css屬性讓整體布局的置中：
設定對象的父級內容置中，這裡一個頁面的為父級是什麼呢？我們可以想象整個頁面的內容是由<html></html>和<body></body>這兩個包含，那根據較近父級我們就設定body的CSS來實現置中問題，可以向在內容裡置中有text-align:center;具體css的置中代碼為：
body{text-aligh:center; } 但是即使這樣也會出現問題，因為你沒有設定布局有多寬“width ”，一旦你內容布局中在最外層css控制中，設定了float:屬性，那布局將會向你設定的float:方向靠，解決方案，除了設定body的置中的css屬性外，還需對布局對象設定置中 ，而且或定義寬度是多少，假如網頁寬度為700px，最外層css樣式為的class="weicheng"，那設定應該這樣“.weicheng{margin:0 auto; width:700px;} ”即可而這個元素在IE下有用，經過實驗在Firefox等瀏覽器下只除了此父級（body）設定text-aligh:center;置中 是無法讓布局置中，那我們還需要對該對象設定個“margin:0 auto ; ”這個是什麼意思呢，意思是內容上下為0距離，而左右為“auto ”自動，這樣就可以設定實現網頁布局置中(這裡設定margin:5px auto; 一樣效果不影響實驗)。完整執行個體為（可將代碼拷貝建立html檔案瀏覽觀看效果）： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>www.divcss5.com的CSS div的布局置中執行個體</title>  <style type="text/css">  <!--  body{ text-align:center; }  .waicheng {color: #0066CC; margin:5px auto; width:700px; height:200px; border:1px solid #000000;}  -->  </style>  </head>  <body>  <div class="waicheng">我是css中的置中的實驗;我的布局外層有一個邊為1px黑色邊，我寬700px，高為200px,設定了與頂部內容距離為5PX</div>  </body>  </html>

CSS布局置中執行個體瀏覽

2、介紹使用css屬性讓網頁的背景置中：
這裡置中就包括了左右置中與上下置中，置中代碼如下：
body{BACKGROUND: #FFF url(http://www.divcss5.com/img/css-logo.gif） no-repeat center;} //這段話意思就是讓css-logo.gif這個圖片設定背景不重複（no-repeat ），並將置中（center）這個置中是左右置中，而垂直不需要設定，自動會置中。

3、css讓介紹文字、圖片內容左右上下置中方法教程：
我們知道左右就中好辦，直接用text-align:center; 即可讓文字與圖片內容置中，但是垂直呢，假如我們在高度為120px的高度下垂直置中，圖片置中是vertical-align:middle;css屬性，文字置中就要靠設定行高方法置中文字內容，這裡我們設定為120px的高度這需要設定個line-height:120px;這樣就通過css屬性類樣式來實現文字與圖片的上下左右置中。

整個網站置中的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.divcss5.com的CSS div的完整置中執行個體</title> <style type="text/css"> <!-- body{ text-align:center; margin:0 auto; background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;} .waicheng {color: #0066CC; margin:5px auto; width:700px; height:120px; line-height:120px; border:1px solid #000000; } .waicheng img {vertical-align:middle;} --> </style> </head> <body> <div class="waicheng">我是css中的置中的完整置中執行個體;我的布局外層有一個邊為1px <img src="http://www.divcss5.com/img/css-logo.gif" alt="圖片內容置中" /></div> </body> </html>

    • 本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

    相關關鍵詞：
    css div table generator beautiful div box css css center div horizontally how to make div centered in css how to set css class on div in reactjs component div division div load
    相關文章
    css實現滑鼠滑過改變文字(中文變英文)
    selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
    使用CSS巧妙地製作背景色漸層動畫執行個體
    詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
    CSS修改iframe內的樣式問題
    如何用CSS改變上劃線、底線以及刪除線的顏色呢？

    聯繫我們

    該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

    熱門內容

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    Get Started for Free

    • Sales Support

      1 on 1 presale consultation

      Chat Contact Sales

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

      Open a Ticket

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

      Learn More