如何将html所有元素居中

bxc11 发布于 2015/05/25 12:54
阅读 3K+
收藏 0

代码是这样的:

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

加载中
0
houhuiliang
houhuiliang

html布局最好别用绝对定位。要让所有元素居中,设置个宽度和margin:0 auto;即可。

以下仅供参考:

<!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">
.wrapper{
	width:990px;
	margin:0 auto;
}
.header{
	width:100%;
	background:#ccc;
}
.content{
	width:100%;
	background:#fff;
	margin-top:5px;
	border:1px solid #ccc;
}
.footer{
	width:100%;
	background:#fff;
	margin-top:5px;
	border:1px solid #ccc;
}
</style> 
 
</head>

<body>
	<div class='wrapper'>
		<div class='header'>hello world</div>
		<div class='content'>this is main content</div>
		<div class='footer'> this is footer</div>
	</div>
</body>
</html>



bxc11
bxc11
那个界面里几乎所有的都是绝对定位。我将position改成relavate后,终于背景图片和一部分内容能够居中,结果界面布局全乱了
0
登录-注册
登录-注册
我感觉你起码应该加个图片,俗话说没图说个JB
0
OSC屠夫
OSC屠夫
考虑下bootstrap,采用响应式页面。然后左右各自col-md-3的空div~试下吧
0
eechen
eechen
行级元素用 text-align: center;
块级元素用 margin: 0 auto; (注意设置宽度width)
背景水平居中用: background: url("bg.jpg") no-repeat scroll center 0 tansparent;
0
欣儿
欣儿
看到,表格都没写完
bxc11
bxc11
不知道是我为了上传删的时候删了还是拿到这份代码的时候就没有。
返回顶部
顶部