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

网页设计居中

 发布时间：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控件

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