2

我是一名初级网页设计师。可能有人问过这个问题，但我也参考了这些答案，但它们没有帮助。我的问题是我有一个div称为“标题”和 3 个 div 里面div。这些不与 parent 的中心对齐div。我已经尝试了很多答案，但它们都不起作用。

这是我的代码：

    #header {
    height: 176px;
    text-align: center;
    position: absolute;
       }
   #header div {
    display: inline;
    text-align: center;
    margin: auto;
    float: left;
    position: relative;

}

#logo {
    height: 156px;
    width: 218px;
    background-image: url(../images/logo_03.jpg);


}

#tagline {
    width: 250px;


}
#badge {
    width: 300px;


}

这是html代码

<!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>Ebhar media</title>
<style type="text/css">
</style>
<link href="style/homestyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {

    min-width:1407px;
}
</style>
</head>

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
<div id="base">
  <div id="header" align="center">
    <div id="logo"></div>
    <div id="tagline">YOUR SUCESS IS OUR SUCESS</div>
    <div id="badge">Content for  id "badge" Goes Here</div> 
  </div>
  <div id="navbar">Content for  id "navbar" Goes Here</div>
</div>
</body>
</html>
4

4 回答 4

3

删除position:absolutefrom#header和 remove position:relative, float:leftfrom the#header div

#header {
    height: 176px;
    text-align: center;
/*    position: absolute;*/
}
#header div {
    display: inline;
    text-align: center;
    margin: auto;
/*    float: left;
    position: relative;*/
}

我认为这将解决您的问题。

演示：http: //jsfiddle.net/UYWqt/

于 2013-06-05T09:01:53.343 回答
3

你可以简单地在你的 div 上添加一些属性试试这样

<div align="center">
   <div></div>
</div>
于 2013-06-05T10:18:21.183 回答
0

那是你真正需要的吗？

http://jsfiddle.net/nJqfn/

未来的一些备注 - 不要使用

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">.

最好包含 normalize.css 或 reset.css 用于跨浏览器视图。
那是 

<div id="header" align="center">

也不好。尝试将视图和代码分开。

于 2013-06-05T11:38:30.770 回答
0

以下内容应该适合您：

#header {
    height: 176px;
    width: 100%;
}

#header div { margin: auto; }

#logo {
    height: 156px;
    width: 218px;
    background-image: url(../images/logo_03.jpg);
}

#tagline {
    width: 250px;
}
#badge {
    width: 300px;
}
于 2013-06-05T09:17:17.760 回答