2 bxc11 bxc11 于 2015.05.25 11:37 提问

如何将html全部元素居中

html小白一个。遇到的代码想将它居中,然后尝试了align="center"和

都没有效果。代码精简后是这样的:
 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>待居中</title>
    <style type="text/css">
.导航栏 {
    position: absolute;
    width: 1260px;
    top: 61px;
    height: 33px;
    left: 12px;
    font-size: 24px;
    background-color: #128BDA;
    color: #FFF;
    font-family: "Arial Black", Gadget, sans-serif;
    font-weight: bold;
    z-index: 100;
}
.gywm {
    position: absolute;
    left: 12px;
    top: 800px;
    width: 474px;
    height: 93px;
}
.hzzd {
    position: absolute;
    left: 529px;
    top: 800px;
    width: 764px;
    height: 121px;
}
.
body {
    background-image: url();
    align="center";
}
.back {
    position: absolute;
    left: 10;
    top: 0px;
    z-index: 0;
}
</style>  
</head>

<body>
<div>
<div class="back"><img src="images/back.jpg" width="1280" height="909" border="0" align="absmiddle" /></div>
<div class="hzzd">
  <p>合作站点</p>
</div>  
<div class="gywm">
  <h4>关于我们</h4>
</div>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<div class="导航栏"><strong>首页</strong></div>
<div class="导航栏">
  <table width="1260" border="0" align="center">
    <tr>
      <td width="115" scope="row"><a href="index.php" target="_blank"style="color:#FFFBF0">首页</a></td>
      <td width="209">1</td>
    <td width="189">2</td>    </tr>
</body>
</html>

9个回答

bxc11
bxc11   2015.05.25 11:38

额。。为什么上传之后变成这个样子的了。。

wwwwxrwxr
wwwwxrwxr   2015.05.25 11:45

楼主,align="center"是标签属性,设置或获取表格排列。如div,table等标签可以快速使用。但是有许多标签是不支持这个属性,同样也存在兼容问题

caozhy
caozhy   Ds   Rxr 2015.05.25 11:47

在你的页面上放一个div

 <div id="center">
 你的网页放在里面
 </div>

添加如下样式

 body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 
bxc11
bxc11 还是没有居中。。
2 年多之前 回复
zxhj963
zxhj963   2015.05.25 11:49


{网页的内容}




bxc11
bxc11 你的回复有一些看不了,是三行无法选中的文本框
2 年多之前 回复
yl695078239
yl695078239   2015.05.25 11:52

.box{maring:0 auto;}这样它就居中了!

zxhj963
zxhj963   2015.05.25 11:54

思路就是在body中加一个div来放你网页要居中的内容,然后将这个div在body中居中,要使这个div在body中居中就必须要给这个div指定宽度,然后再加上margin:auto样式就可以了,代码如下:

 <body>
     <div style="MARGIN: auto; width:100px;">{这里放你网页的内容}</div>
 </body>

希望对你有帮助

bxc11
bxc11 回复程行天下: 谢谢。貌似学长为了相对位置合理用了绝对定位。我重写吧。
2 年多之前 回复
zxhj963
zxhj963 我说的可以行的通,所有浏览器通用,只不过,用了 position: absolute; 绝对定位,那就没用了,一般不是要特殊效果,不要用这个定位
2 年多之前 回复
bxc11
bxc11 添加之后并没有用。我用的是firefox,你的浏览器中有效吗?
2 年多之前 回复
bxc11
bxc11 我尝试过用div嵌套的办法,当时写的是margin:0 auto;好像没达到预期效果。我试一试吧
2 年多之前 回复
bxc11
bxc11 我尝试过用div嵌套的办法,当时写的是margin:0 auto;好像没达到预期效果。我试一试吧
2 年多之前 回复
showbo
showbo   Ds   Rxr 2015.05.25 11:58
 <div style="margin:0px auto;width:900px">你body里面原来的内容,一定要加宽度,要不设置margin无效</div>
zw0283
zw0283   2015.05.25 12:19

你直接用

包起来不就可以了么。。。
bxc11
bxc11 回复zw0283: 尝试过,无效;好像是因为position:absolute;然而如果不绝对,界面的位置就乱了
2 年多之前 回复
zw0283
zw0283 center标签
2 年多之前 回复
u011376884
u011376884   2015.05.25 13:56

text-align: center;文字居中
vertical-align: middle;垂直居中
margin: 0 auto;也可以居中
LZ到底想要什么居中效果?
align="center";css有这个吗?

bxc11
bxc11 回复逝_去_的_光_阴: 谢谢,我先试一试吧
2 年多之前 回复
u011376884
u011376884 回复bxc1115: position: absolute;既然用绝对定位了,那你就自己调left top 变成水平居中吧……
2 年多之前 回复
bxc11
bxc11 想要的就是把整个页面水平居中。但是因为那两种我试了都没有达到想要的效果
2 年多之前 回复
bxc11
bxc11 我尝试的就是text-align: center;由于不熟练,说的时候说成了align。。
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片