導航:首頁 > 萬維百科 > 網頁設計盒子在瀏覽器居中

網頁設計盒子在瀏覽器居中

發布時間:2021-03-16 19:40:41

1、怎樣讓網頁中的div塊在瀏覽器中上下居中呢

這是我以前回答過的一個問題,原理一樣!
.middle{
width: 400px;
height:160px;
position: absolute;
margin-left: -200px;
margin-top: -80px;
top: 50%;
left: 50%;
display: block;
z-index: 2000;
border: 1px solid #006699;
}
原理是這樣的:
因為這個塊元素是絕對定位position: absolute。首先你要知道「絕對定位」的概念:它是以最近一個已經定位的祖先為基準進行定位,如果沒有就以屏幕定位!
在這里(屏幕大小或祖先元素對於它來說就是100%);
top: 50%,就是在距屏幕上方或祖先元素50%,
left: 50%,就是在距屏幕左方或祖先元素50%,
因為它是以『左上角』為基準偏移的,它現在距離左邊是:50%+400px,這個塊的左上角在屏幕的中間,但是這個塊元素不在屏幕中間,所以margin-left: -200px;把它想左邊拉回一半,它就在屏幕中間了!
margin-top: -80px;和上面的原理一樣。往上拉回去一半。。

2、如何讓網頁設計中的層相對於屏幕居中

最好別用Layer1這樣的層,現在都用div盒子做結構在用css表現,居中很簡單http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></A>http://www.w3.org/1999/xhtml"></A>無標題文檔 此處顯示 class "left" 的內容margin: 0px auto;這句是關鍵

3、做網頁的時候如何讓網頁在瀏覽器中居中顯示

DW中從繪制層換到表格顯示 再選擇最大的表格 居中(也就是全選居中)

好久沒用DW 不知道對不對... 反正就是要在最外面的表格居中顯示

要代碼的話 <div style="margin:0px auto">內容</div>
<p>內容</p>

或參考別人講的:
可以把標尺開開 然後按照坐標定位
如果是想繪制的層居中 可以在填坐標左的位置上填上50-(層的寬度/61)最後的數比如32加上百分號32%也可以 但最好按坐標填上 填在屬性面版里的 左 和上裡面 這兩個可以控制具體位置 左裡面填50就是說離左邊有50像素 上裡面填50是說離上有50像素

4、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

5、怎樣使框架網頁在瀏覽器中居中?

網頁框架居中方法如下:
1.
在<body
text-align="center">
2.#box{margin-left:auto;margin-right:auto;}
3.把所有框架嵌套到一個DIV標簽裡面,然後設版置這個DIV標簽的權style屬性為"margin:0
auto;
width:網頁的寬度"

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

css盒子內容居中的方法:

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

代碼:

效果:

垂直居中的line-height;

代碼:

效果:

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

代碼:

效果:

7、如何讓製作的網頁在IE瀏覽器中居中顯示?

直接給你的BODY加一個CSS:文本居中。

之後無論你建立一個層還是一個表格,它始終都是在頁面中間顯示。

這是一個最基本的CSS的運用,目前網頁切圖必不可少的工作就是在剛剛打開一個新的頁面的時候給BODY賦一個CSS,除了居中之外,還有網頁中顯示量最大的字體、背景色等等。這是開始將一張效果圖實現成具體網頁的必須工作。

那麼接下來就要根據你的需要給內容嵌套一個層或者一個表格了。我習慣上使用層,然後把網頁里的所有的內容放在這個DIV裡面,當然還是需要用CSS來控制它......事實上這是一種設計模式,更准確的說是我個人習慣的一種切圖方式。

不同的人設計網頁會用不同的方式,那麼我們作為專業設計師會給自己一個比較符合標准和使用習慣,並且可以將誤差降低到最小程度的設計思路,而切圖工作則是其中的一個部分。它的重點在於實現,將效果圖一分不差的實現在頁面上,這個過程不需要太多的創意,不需要個性或者理念,它只需要一個習慣,或者說是一個合理的控制流程。也應該是網頁設計當中一個最不可少也最為枯燥的過程了。

建議你找一個比較專業的設計師來帶帶你,這樣可以在最短的時間內幫你養成一個好的切圖習慣,它可以減少你工作當中大量的時間。

另外,多花點時間學習CSS但不要局限於它。

8、網頁設計網頁整體在瀏覽器上居中問題

你設置了position:absolute;肯定不居中了!

9、HTML如何使一個層<div>在瀏覽器中始終居中?

先給DIV的寬度,再設置左右自動對其即可

10、網頁製作, 利用 Div+CSS 布局頁面, 如何"盒子"居中?

加一個<center></center>

<center>
<style type="text/css">
<!--
#div2css {
background-color: #009900;
height: 300px;
width: 700px;
}
.STYLE1 {
font-size: 70px;
color: #FF0000;
font-weight: bold;
}
-->
</style>
</head>

<body>
<div id="div2css" align="center">
<div align="center" class="STYLE1">這個綠色區域, 怎麼才能像下面表格那樣內容 "居中" ?</div>
</div>
<table width="600" border="5" align="center" cellpadding="2" cellspacing="0" bordercolor="#FF0000">
<tr>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</center>
試試

與網頁設計盒子在瀏覽器居中相關的知識