導航:首頁 > 萬維百科 > 網頁設計居中

網頁設計居中

 發布時間：2020-07-26 16:45:46

1、網頁設計中內容全部居中怎麼弄啊

全部換成表格吧，想怎麼居中都行的，圖層居中對於初學者有一定的難度，建的css樣式裡面需要設置相對位置什麼的，你說的id建好後，還需要進入代碼操作才可以居中，總之比較麻煩，

2、在網頁設計中怎麼讓背景圖片水平居中

background-image:url(/images/bg.jpg); /*背景圖片*/
background-repeat:no-repeat; /*背景圖片不重復*/
background-position:center top; /*水平居中，垂直頂對齊*/

3、html中，怎樣讓網頁在屏幕上居中？

外層你可以設置為width:100%;margin: 0 auto;這個是可以使寬度取自屏幕解析度的寬度,並且居中顯示.
內層的話如果你想要在比如1366的屏幕上顯示,那就也是按照這個原則,當然你可以設定一個max-width,一般不會超出最大寬度,當然你也可以設置為min-width,這個是允許的最小的寬度,意思就是可以超出,但是不能低於這個寬度.
希望我的回答能幫到你!

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

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

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

但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有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個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

5、在網頁設計中，如何讓網頁居中顯示，經常會網頁會靠左對齊

在網頁設計中，可以嘗試將所有網頁放在一個大的div中，再將該div的,左右margin設為auto:
完整的例子為：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>居中</title>
<style>
body{ text-align:center}
.main{ margin:0 auto; width:500px; height:200px; border:1px solid #F00}
</style>
</head>
<body>
<div class="main">我所在DIV在任意瀏覽器均布局居中</div>
</body>
</html>

6、html+css做網頁時，如何讓整張網頁居中顯示

使用CSS 語法要設定一個div 水平置中，是很常見到的需求，最多人使用margin: 0 auto; 這個方法就可以達成。但是，如果要讓一個div 同時間做到在網頁上水平置中還要垂直置中，也就是CSS 上下左右置中這就有點麻煩了，不太容易喔！

利用table中內容在單元格中默認垂直居中的特性。

2.利用css3中的transform屬性

3.利用margin屬性

4.利用利用position屬性把left，top，right，bottom四個的值設為0，再用margin:auto;

最好把你的代碼改寫了一下，並實現居中效果

效果圖

7、在HTML網頁設計時中，怎麼樣布局使得<body>中的整體居中？ 也就是說，當html頁面寬度小於

<html>
  <head>
  </head>
  <body>
    <div id="wrap">測試</div>
  </body>
</html>#wrap{width:980px;margin:0 auto;height:100px;background-color:red;}

margin:0 auto;就會使div位於中間位置。望採納！

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

<!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>

9、如何使網頁居中

如果你的頁面是Div+CSS的,可以改下CSS.設置一下left:auto;right:auto;即可實現居中,如果顯麻煩再外面套一個容器多套一個DIV設置left:auto;right:auto;.如果是Table值需要吧algin設置成center即可以居中.
如果象你說的那個樣想改網站內所有網站.
可以再沒個頁面內套一個DIV設定一下CSS,然後用dw查找替換站點下所有網頁

10、網頁製作頁面如何居中

<table border="1" align="center">
</table>
還有一種是CSS+DIV的方法就是用百分比來控制，比如用三個div橫向排列最左和最右是百分之10中間百分之80,可以針對你所選用的語言比如純html或js來控制，不同的語言方法不一樣。網上也有現成的JS控制項

與網頁設計居中相關的知識