在div中居中div
[英]centering div inside a div
问题描述
I am a beginner level web designer. 
我是初学者级网页设计师。 This question might have been asked, but I have refered that answers too but they have not helped. 可能有人问过这个问题，但我也提到了这些答案，但它们没有帮助。 My problem is I have a div called "header" and 3 divs inside this div . 我的问题是我的div有一个名为“ header”的div和3 div 。 These are not aligning to the center in the parent div . 这些未与父div的中心对齐。 I have tried many answers but they are not working. 我已经尝试了许多答案，但是它们没有用。
Here is my code: 这是我的代码：
#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;
}
here is html code 这是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 个解决方案
解决方案1
3 2013-06-05 09:01:53
remove the position:absolute from #header and remove position:relative , float:left from the #header div 从#header移除position:absolute并从#header div移除position:relative ， float:left
#header {
height: 176px;
text-align: center;
/* position: absolute;*/
}
#header div {
display: inline;
text-align: center;
margin: auto;
/* float: left;
position: relative;*/
}
I think this will solve your issue. 我认为这可以解决您的问题。
Demo: http://jsfiddle.net/UYWqt/ 演示： http ： //jsfiddle.net/UYWqt/
解决方案2
3 2013-06-05 10:18:21
You can simply add some attribute on your div try something like this 您可以简单地在div上添加一些属性，试试这样的事情
<div align="center">
<div></div>
</div>
解决方案3
0 2013-06-05 09:17:17
The following should work for you: 以下应该为您工作：
#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;
}
解决方案4
0 2013-06-05 11:38:30
Is that what you exactly need? 那正是您真正需要的吗？
http://jsfiddle.net/nJqfn/ http://jsfiddle.net/nJqfn/
Some remarks for future - don't use 将来的一些注意事项-请勿使用
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">.
It's better to include normalize.css or reset.css for cross-browser view. 对于跨浏览器视图，最好包括normalize.css或reset.css。
That's 那是
<div id="header" align="center">
not good too. 也不好 Try to separate view and code. 尝试分离视图和代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.