Menu
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ).
I am trying to center a DIV, with "margin:auto" . It works fine with Chrome and FF but the following code does not center the DIV with IE:
CSS
#container {
margin:auto;
width:950px;
height:50px;
background:#000;
}
HTML
<div id="container"></div>
What am I doing wrong?
Thanks,
Joel
Edit (full HTML/CSS code):
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>
#container {
margin: 0 auto;
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With