div中的居中div

我是初学者级别的网页设计师。这个问题可能已经被问到了，但我也提到了答案，但他们没有帮助。我的问题是我有div称为“标题”和3 012这个div里面的div。这些未与父母div中的中心对齐。我已经尝试了很多答案，但他们不工作。div中的居中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>

来源

2013-06-05 sam

您还需要向我们展示您的HTML标题，以及您真正想要看到的内容。 – KaraokeStu

一个可能的问题是你的'＃头部'由于'position：absolute'而失去了它的全部宽度'' - 如果你给它'宽度：100％会发生什么？' – xec

@KaraokeStu我已经添加了html代码 – sam

从#header删除position:absolute从#header div

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

我认为日删除position:relative，float:left是会解决你的问题。

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

来源

2013-06-05 09:01:53

是的，这看起来很合理。我相信'#header div'上的'text-align：center;'和'margin：auto;'也是多余的。 – xec

但这没有解决问题 – sam

检查jsFiddle链接 http://jsfiddle.net/UYWqt/ –

以下应为你工作：

#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-05 09:17:17 KaraokeStu

你可以简单地增加一些属性上的DIV 尝试这样的事情

<div align="center"> 
    <div></div> 
</div>

来源

2013-06-05 10:18:21 edd

这就是你确切需要？

http://jsfiddle.net/nJqfn/

对未来的一些言论 - 不要使用

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

最好是包括normalize.css或reset.css跨浏览器视图。
这是

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

还不错啊。尝试分离视图和代码。

来源

2013-06-05 11:38:30 LadyBo

div中的居中div

回答

相关问题