DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS網頁布局居中問題解決方案
DIV+CSS網頁布局居中問題解決方案
編輯:CSS詳解     

本文和大家重點討論一下DIV+CSS布局居中問題,主要包括DIV+CSS布局中整體居中,背景和圖片居中等方式,相信本文介紹一定會讓你有所收獲。

DIV+CSS布局居中問題

在DIV+CSS布局的頁面裡,從布局內容到頁面裡文章文字居中都是非常重要的,而CSS來設置居中也是非常簡單的。

1、首先介紹使用CSS屬性讓整體布局的居中:

設置頁面父級居中,那整個頁面的父級是什麼呢?我們可以想象整個頁面的內容是由和這兩個包含,那根據較近父級我們就設置body的CSS來實現居中問題,可以向在內容裡居中有text-aligh:center;而這個元素在IE下有用,經過試驗在火狐等浏覽器下只設置text-aligh:center;居中是無法讓布局居中,那我們還需要設置個“margin:0auto;”這個是什麼意思呢,意思是內容上下為0距離,而左右為“auto”自動,這樣就可以設置實現網頁布局居中具體CSS的居中代碼為:

body{text-aligh:center;margin:0auto;}但是即使這樣也會出現問題,因為你沒有設置布局有多寬“width”,一旦你內容布局中在最外層CSS控制中,設置了float:屬性,那布局將會向你設置的float:方向靠,解決方法,除了設置body的居中的CSS屬性外,還需在布局設置最外層div也居中,而且定義寬度是多少,假如網頁寬度為700px,最外層CSS樣式為的class="weicheng",那設置應該這樣“.weicheng{margin:0auto;width:700px;}”即可。完整實例為(可將代碼拷貝新建Html文件浏覽觀看效果):

以下為引用的內容:

  1. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
  3. <head>
  4. <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=gb2312"/>
  5. <title>www.divCSS5.com的CSSdiv的布局居中實例title>
  6. <styletypestyletype="text/CSS">
  7.  
  8.  
  9.  
  10.  
  11. 我是CSS中的居中的實驗;我的布局外層有一個邊為1px黑色邊,  
  12.  
  13. 我寬700px,高為200px,設置了與頂部內容距離為5PX
 
  •  
  •  
  •  
  • DIV+CSS布局居中實例浏覽

    2、介紹使用CSS屬性讓網頁的背景居中:

    這裡居中就包括了左右居中與上下居中,居中代碼如下:
    body{BACKGROUND:#FFFurl(/School/UploadFiles_7810/201202/20120229201217289.gif這個圖片設置背景不重復(no-repeat),並將居中(center)這個居中是左右居中,而垂直不需要設置,自動會居中。

    3、CSS讓介紹文字、圖片內容左右上下居中方法教程:

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

    整個網站居中的代碼如下:

    以下為引用的內容:
     

    1.  
    2. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 
    3.  
    4.  
    5.  
    6. www.divCSS5.com的CSSdiv的完整居中實例 
    7.  
    8.  
    9.  
    10.  
    11.  
    12. 我是CSS中的居中的完整居中實例;  
    13. 我的布局外層有一個邊為1px  
    14.  
    15. alt="圖片內容居中"/>
     
  •  
  •  
  •  
  • 關於居中網頁的DIV+CSS的CSS完整居中實例浏覽。

    【編輯推薦】

    1. DIV CSS網頁布局中對段落進行排版的方法
    2. 實例解析CSS padding 屬性用法
    3. DIV CSS網頁布局需要掌握的八大技巧
    4. CSS教程:詳解margin和padding屬性應用場合
    5. 解讀Div CSS網頁布局對SEO的四大影響

    【責任編輯:程華權 TEL:(010)68476606】

    • 給力 (0票)
    • 動心 (0票)
    • 廢話 (0票)
    • 專業 (0票)
    • 標題黨 (0票)
    • 路過 (0票)

    原文:DIV+CSS網頁布局居中問題解決方案 返回開發首頁

    分享到: QQ微博QQ空間開心人人網 豆瓣 新浪微博收藏|打印|復制
    CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
    小編推薦
    熱門推薦
    大家都在看
    XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
    Copyright © DIV+CSS佈局教程網 All Rights Reserved