导航:首页 > 万维百科 > 网页设计如何居中

网页设计如何居中

发布时间:2020-11-02 15:53:54

1、在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位于中间位置。望采纳!

2、网页设计中如何使页面居中对齐?

在你要居中的标签中加入 style="margin-left:auto;margin-right:auto;" 当然,有个前提是,你的文件头必须是标准的dtd。

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

4、如何让制作的网页在IE浏览器中居中显示?

直接给你的BODY加一个CSS:文本居中。

之后无论你建立一个层还是一个表格,它始终都是在页面中间显示。

这是一个最基本的CSS的运用,目前网页切图必不可少的工作就是在刚刚打开一个新的页面的时候给BODY赋一个CSS,除了居中之外,还有网页中显示量最大的字体、背景色等等。这是开始将一张效果图实现成具体网页的必须工作。

那么接下来就要根据你的需要给内容嵌套一个层或者一个表格了。我习惯上使用层,然后把网页里的所有的内容放在这个DIV里面,当然还是需要用CSS来控制它......事实上这是一种设计模式,更准确的说是我个人习惯的一种切图方式。

不同的人设计网页会用不同的方式,那么我们作为专业设计师会给自己一个比较符合标准和使用习惯,并且可以将误差降低到最小程度的设计思路,而切图工作则是其中的一个部分。它的重点在于实现,将效果图一分不差的实现在页面上,这个过程不需要太多的创意,不需要个性或者理念,它只需要一个习惯,或者说是一个合理的控制流程。也应该是网页设计当中一个最不可少也最为枯燥的过程了。

建议你找一个比较专业的设计师来带带你,这样可以在最短的时间内帮你养成一个好的切图习惯,它可以减少你工作当中大量的时间。

另外,多花点时间学习CSS但不要局限于它。

5、在网页制作中如何控制DIV居中显示,用CSS怎么控制背景图片大小?

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

body {text-align: center;background: url(small2.png); background-size: 60%;}

3、浏览器运行index.html页面,此时成功通过css控制了div居中显示,背景图片的大小为60%。

6、网页制作中如何设置标题中的文字是垂直居中

实现的方法和详细的操作步骤如下:

1、第一步,创建一个新的html文档,在body标签中添加一个div标签并填写一段文本,然后为该div设置一些样式,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,将“
 text-align”属性添加到div,该属性值为“ center”,然后文本将在框架内水平居中,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,将“
 line-height”属性添加到div,该属性值为div的高度,然后文本将在框中垂直居中,见下图。这样,就解决了这个问题了。

7、在网页设计中,如何让网页居中显示,经常会网页会靠左对齐

在网页设计中,可以尝试将所有网页放在一个大的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>

8、网页制作页面如何居中

&

9、网页制作如何居中,让布局自动适应不同显示屏

首先先,这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码:
完整代码<html>
<head>
<style
type="text/css">
body{
background:#999;
text-align:center;
color:
#333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right:
auto;
margin-left:
auto;
padding:
0px;
background:
#EEE;
height:60px;
text-align:left;
}
#contain{
margin-right:
auto;
margin-left:
auto;
width:
776px;
}
#mainbg{
width:776px;
padding:
0px;
background:
#60A179;
float:
left;
}
#right{
float:
right;
margin:
2px
0px
2px
0px;
padding:0px;
width:
574px;
background:
#ccd2de;
text-align:left;
}
#left{
float:
left;
margin:
2px
2px
0px
0px;
padding:
0px;
background:
#F2F3F7;
width:
200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right:
auto;
margin-left:
auto;
padding:
0px;
background:
#EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div
id="header">header</div>
<div
id="contain">
<div
id="mainbg">
<div
id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div
id="left">
<div
class="text">left</div>
</div>
</div>
</div>
<div
id="footer">footer</div>
</body>
</html>
代码分析
首先我们定义body和顶部第一行#header,这里面的关键是body中的text-align:center;和header中的margin-right:
auto;margin-left:
auto;,通过这两句使得header居中。注:其实定义text-align:center;就已经在IE中实现居中,但在mozilla中无效,需要设置margin:auto;才可以实现mozilla中的居中。
接下来定义中间的两列#right和#left。为了使中间两列也居中,我们在它们外面嵌套一个层#contain,并对contain设置margin:auto;,这样#right和#left就自然居中了。
注意中间两列定义的顺序,我们首先定义#right,通过float:
right;

与网页设计如何居中相关的知识