導航:首頁 > 萬維百科 > 如何將盒子居中網頁設計

如何將盒子居中網頁設計

 發布時間：2020-09-29 19:24:44

1、怎樣使網頁設計中的css盒子內容居中？

css盒子內容居中的方法：

css盒子內容水平居中的text-align:center ；或 margin:0 auto；

代碼：

效果：

垂直居中的line-height；

代碼：

效果:

絕對定位水平垂直居中，position:absolute;top:50%;left:50%;

代碼：

效果：

2、dreamweaver 網頁設計如何讓網頁在瀏覽器里居中

最容易的是,將你所有的html代碼放在這個div裡面:
<div style="width:950px;height:auto;margin:0 auto;">
(把你原來的內容放進來,也就是你<body>與</body>之間的所有代碼,width:950px;必須要有寬度,根據你自己的寬度來改一下就OK了!)
</div>

大概樣子:
<body>
<div style="width:950px;height:auto;margin:0 auto;">
你的網頁內容:
.....
...
</div>
</body>

參考資料： www.ruofeel.cn

3、html中盒子里的圖片怎麼居中

這個，你可以先做一個盒子，（然後再復制3個，寬度給百分比，變成一行）。
內部的圖片一般設置寬度80%，margin:10px auto;就能居中

4、網頁設計中怎樣設置所有內容居中

<!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" lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>居中div演示效果</title>
<style type="text/css">
.align-center{
margin:0 auto; /* 居中 這個是必須的，，其它的屬性非必須 */
width:500px; /* 給個寬度 頂到瀏覽器的兩邊就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等內容居中 */
}
</style>
</head>

<body>
<div class="align-center">居中div演示效果<br/><br/>更多代碼請訪問 <a href="http://www.poluoluo.com/" target="_blank">破洛洛</a></div>
</body>
</html>

5、如何讓一個DIV 居中在網頁的中心。？？？

層垂直居中於瀏覽器，一直是新手朋友比較頭疼的問題。

其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。

如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫。

div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}

6、html 如何讓div居中

div居中可以用外邊距margin屬性來實現。

1、新建html文檔，在body標簽中添加div標簽，標簽的id為「header」，這時因為div標簽中沒有內容且沒有設置樣式，所以網頁中顯示空白：

2、這時為div標簽設置原題中的css樣式，此時雖然div盒子顯示了，但是沒有居中：

3、此時為div添加一個「margin: 0 auto」屬性就會居中顯示，「margin」指的是div標簽的外邊距，「0」指的是div標簽上下的外邊距，「auto」指的是div標簽左右的外邊距，並且會根據瀏覽器窗口大小自動居中，這時就是完整的html和css代碼：

7、怎麼將div盒子放在網頁中間

正常：margin{margin:0px auto}
絕對定位：position:absolute;top:150px;left:50%;margin-left:-xxx px; xxx是div的寬度數值。
fixed定位同絕對定位一樣，只不過將position的absolute換成fixed。

absolute，和fixed的居中定位一般實現對於屏幕正中央來說，如果是div深層次的居中要視情況來編寫居中樣式。我所知道的居中也就這三種，希望幫助到你

8、網頁製作圖片怎麼居中

圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由於最近的項目可能會用到這個方案，所以把一些常用的方法都收集整理了一下。

下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對於外部的容器垂直居中。

但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，並設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標准瀏覽器下，IE6/IE7還得使用定位。

HTML結構部分：

<div id="box">
  <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個弊端，在標准瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict)：

標准瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
  display:inline-block;
  height:100%;
  vertical-align:middle
  }
#box img {
  vertical-align:middle
  }
</style>
<![endif]-->

方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集於網頁教學網，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

9、html中如何讓一整個網頁居中?

使用盒子布局
在整個頁面放在一個div中，然後設置最外層的盒子屬性
<div align="center">All Of Contents</div>
<!-- all of contents 表示你的頁面內容 -->需要給這個盒子一個css樣式
margin:0px;
padding:0px;這樣就相當於沒有這個盒子，align可以寫到css樣式里

與如何將盒子居中網頁設計相關的知識