div不会以保证金居中:0自动； [英] div won't center with margin: 0 auto;
问题描述
我的问题只是将div居中
My problem is simply centering a div.
此刻，我只有一个裸露的html文件.我不知道为什么margin: 0 auto无法正常工作.
At the moment, I just have a bare bones html file. I have no idea why margin: 0 auto isn't working.
这是我的html的布局:
Here is the layout of my html:
<style type="text/css">
#header {
width: 100%;
margin: 0 auto 20px auto;
height: 50px;
background-color: #0F6;
}
#navigation {
width: auto;
float: right;
margin: 0 auto;
display: inline-block;
}
#content {
background-color: #936;
margin: 0 auto;
width: 960px;
position: relative;
min-width: 720px;
max-width: 960px;
}
footer {
background-color:#0F6;
width: 100%;
height: 200px;
}
body {
background-image: url(images/dark_wall.png);
}
</style>
</head>
<body>
<div id="header">
<div id="navigation">This is the nav</div>
</div>
<div id="content">
<div id="content_top">
</div>
<div id="content_middle">
</div>
<div id="content_bottom">
</div>
</div>
<footer>
<div id="footer_div_1"><p>DIV #1</p>
</div>
<div id="footer_div_2"><p>DIV #2</p>
</div>
<div id="footer_div_3"><p>DIV #3</p>
</div>
</footer>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">
$(document).ready(function() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
$("footer").css("position","fixed").css("bottom",0);
}
});
</script>
<!– Add conditional for IE7 + 8 support –>
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
底部的jquery只是使我的页脚成为粘性页脚，因为这是我所学到的最简单的方法，它可以解决最少的问题.
The jquery at the bottom is simply to make my footer a sticky footer as it is the simplest method I've learned to use that yeilds the least amount of problems down the line.
这是我的外部CSS文件的内容
Here are the contents of my external css file
@charset "utf-8";
/* CSS Document */
body {
min-width: 960px;
background:url(../img/dark_wall.png);
}
html, body {
margin: 0;
border: 0;
width: 100%;
font-size: 100%;
font-family: Impact, "Courier New";
}
#footer_div_1 {
display: inline-block;
width: 33%;
text-align: center;
}
#footer_div_2 {
display: inline-block;
width: 33%;
text-align: center;
}
#footer_div_3 {
display: inline-block;
width: 33%;
text-align: center;
}
推荐答案
要将div的div设置宽度居中，并将margin-left和marign-right设置为auto.
To center the div set width for div and set margin-left and marign-right as auto.
不要在该div中使用float属性，也不要使用display:inline;并显示:inline-block;在那个div
Don't use float property in that div and also don't use display: inline; and display:inline-block; in that div
您在div id ="content"之间没有任何内容，因此div无任何显示.只需添加一些内容或为div id ="content"设置高度.
You don't have any content between div id="content", thus that div has nothing to display. Just add some content or set height for the div id="content".
这篇关于div不会以保证金居中:0自动；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
