div nicht zentrieren mit margin: 0 auto;
Mein problem ist einfach zentrieren einer div.
Im moment, ich habe nur ein bare bones html-Datei. Ich habe keine Ahnung, warum margin: 0 auto funktioniert nicht.
Hier ist das layout meiner 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]–>
Den jquery auf der Unterseite ist einfach, um meine Fußzeile einen sticky footer, wie es ist die einfachste Methode, die ich gelernt habe zu benutzen, die yeilds die wenigsten Probleme.
Hier der Inhalt meiner externen css-Datei
@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;
}
- Ich vergaß zu erwähnen, der div, den ich versuche zu center div id="content".
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mitte der div-Breite festlegen für div und setzen margin-left und marign-Recht als auto.
Nicht verwenden die float-Eigenschaft in das div auch nicht mit display: inline; und display:inline-block; in diesem div
Haben Sie keine Inhalte zwischen div id="content", also das div nichts angezeigt. Nur fügen Sie einige Inhalte oder legen Sie die Höhe für das div id="content".