導航:首頁 > 萬維百科 > 網頁設計的框架邊框怎麼居中

網頁設計的框架邊框怎麼居中

 發布時間：2020-09-15 10:06:36

1、html中css+div！一個網頁的整體框架居中

如：首先對body{margin:0;padding:0;}//主要是控制上邊距
然後：.css{width:960px;height:200px;margin:0 auto;} 以上是樣式
下面在HTML中：
<body>
<div class="css"></div>
</body>
就可以居中了！

2、網頁設計 框架頁居中的問題

用相對 長度 30% 為寬度
如你要左右1:3 ，可把左設25% 右 75%

內嵌框架
<iframe src=目標></iframe>

<frameset cols=25%,*>
<frame src="Bcol.html"> <frame src="Ccol.html">
</frameset>

3、網頁設計邊框做的不能居中

先把body設置成<body style="text-align:center;">
再把要居中的框設置成< style="margin:0px auto;">

4、怎樣使框架網頁在瀏覽器中居中？

網頁框架居中方法如下：

在<body text-align="center">
2.#box{margin-left:auto;margin-right:auto;}

3.把所有框架嵌套到一個DIV標簽裡面，然後設置這個DIV標簽的style屬性為"margin:0 auto; width:網頁的寬度"


5、怎麼著讓html的框架居中？

你這個事html中的表格代碼，要居中的話可以這樣
<table cellspacing="0" align="center">
水平居中

6、製作網頁中如何將框架集居中?

新建一個網頁，增加一個iframe，然後將框架集放在一個iframe里邊 將iframe的源文件設置為框架，然後各iframe設置寬高到你希望的樣子。將iframe劇中就行了

7、css怎樣將邊框里的東西居中

對LS各種回答表示……
不懂就別裝~
第一個錯，跟著就照抄……
水平居中是
text-align:center;
垂直居中是
vertical-align
不過只能用在表格里，以上……

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、讓框架里的網頁在框架里居中顯示。怎麼做？

最簡單的就是<center></center>，但是這樣的話只要是在這個標簽里的內容全部都會居中，不管你是否設置了左對齊還是右對齊，全部居中顯示。

或者用margin：0px auto也可以實現居中。

與網頁設計的框架邊框怎麼居中相關的知識