I have a #header div that is 100% width and within that div I have an unordered list. I have applied margin: 0 auto to the unordered list but it won't center it within the header div.
Can anybody please tell me why? I thought that if I define the width of the parent div, then the unordered list should be able to center itself with margin: 0 auto. What am I missing?
Here is my code:
<style>
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: #333;
min-height: 160px;
font-family:Arial, Helvetica, sans-serif;
}
#sitename {
font-size: 50px;
width: 620px;
margin:0 auto;
padding-top: 35px;
color:#999;
}
#header ul {
float: right;
margin: 0 auto;
}
#header ul li {
float: left;
padding-right: 20px;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1 id="sitename">Photography Auction Site</h1>
<ul>
<li>List of Photos</li>
<li>Image Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
You need to define the width of the element you are centering, not the parent element.
#header ul {
margin: 0 auto;
width: 90%;
}
Edit: Ok, I've seen the testpage now, and here is how I think you want it:
#header ul {
list-style:none;
margin:0 auto;
width:90%;
}
/* Remove the float: left; property, it interferes with display: inline and
* causes problems. (float: left; makes the element implicitly a block-level
* element. It is still good to use display: inline on it to overcome a bug
* in IE6 and below that doubles horizontal margins for floated elements)
* The styles below is the full style for the list-items.
*/
#header ul li {
color:#CCCCCC;
display:inline;
font-size:20px;
padding-right:20px;
}
An inline-block covers the whole line (from left to right), so a margin left and/or right won't work here. What you need is a block, a block has borders on the left and the right so can be influenced by margins.
This is how it works for me:
#content {
display: block;
margin: 0 auto;
}
Why not?
#header {
text-align: center;
}
#header ul {
display: inline;
}
I don't know why the first answer is the best one, I tried it and not working in fact, as #kalys.osmonov said, you can give text-align:center to header, but you have to make ul as inline-block rather than inline, and also you have to notice that text-align can be inherited which is not good to some degree, so the better way (not working below IE 9) is using margin and transform. Just remove float right and margin;0 auto from ul, like below:
#header ul {
/* float: right; */
/* margin: 0 auto; */
display: inline-block;
margin-left: 50%; /* From parent width */
transform: translateX(-50%); /* use self width which can be unknown */
-ms-transform: translateX(-50%); /* For IE9 */
}
This way can fix the problem that making dynamic width of ul center if you don't care IE8 etc.
We can set the width for ul tag then it will align center.
#header ul {
display: block;
margin: 0 auto;
width: 420px;
max-width: 100%;
}
Related
#main #home_banner {
position: relative;
}
#main ul li {
position: relative;
display: inline-block;
overflow: hidden;
}
#container {
width: 950px;
background-color: red;
padding: 0;
margin: 0 auto;
}
#container #main {
margin: 0;
padding: 0;
width: 100%;
height: 950px;
background-color: blue;
border-bottom: #adde64 solid 1px;
}
they both have relative positioning and aren't positioned anywhere except the default, and they're both inside main(except the list is created -after- the image in the html).
However the list doesn't appear all the way to the left, instead it appears outwards quite a bit
Theres two things that I can think of the first is ul's have padding by default so
ul
{
padding:0px;
}
The second is that display:inline-block adds a small white-space between objects so to get raid of that:
ul
{
font-size:0px;
padding:0px;
}
Based on the picture you posted, I'm assuming you're referring to the indented images at the bottom. If you aren't using CSS resets you'll need to set the margins for the ul and li elements. You may also need to adjust the padding of the div that the ul is in.
By default, any ul has a margin and a padding value. Set the ul to {margin:0; padding:0;} and it will be top left aligned
IF you want the list all the way to the left, look into padding-start attributes. I think this is what you are asking.
Try setting your lists with the following css:
-moz-padding-start: 0px;
-webkit-padding-start: 0px;
-o-padding-start: 0px;
padding-start: 0px;
padding-left:-0px'
I have several <li> items centered and displaying inline within <ul> tags, but I cannot seem to get the <ul> itself to center on the page. You can see the slight indention problem on this JSFiddle.
Here is the HTML for the list:
<ul>
<li>Home</li> |
<li>Knowing</li> |
<li>Caring</li> |
<li>Working</li> |
<li>Living</li> |
<li>Opportunities</li> |
<li>Medical Staff Services</li>
<br> asdf © 2014
</ul>
Here is the CSS:
body {
font-size: 75%; /* Base browser font size is 14px */
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: center;
margin: 0 auto;
width: 75%;
clear: both;
}
a, a:link, a:hover, a:active, a:visited {
text-decoration: none;
}
ul {
margin: 0 auto;
}
li {
text-align: center;
display: inline;
}
.footer a:link, .footer a:visited, .footer a:active, .footer a:hover, {
text-align: center;
color: #cccccc;
}
Annoyingly, the list centers if I delete the <ul> tags from the HTML, but that is improper markup and potentially dangerous/problematic.
I've tried a few other suggestions from similar questions, such as positioning a container div left at width: 100%; with position: relative;, positioning the <ul> div left and floating it left 50%, and then positioning the <li> items left and floating them right 50%, but that doesn't work with regard to the | separators that I have in-between each <li> item.
Is my markup somehow still incorrect? Do I have some conflicting CSS values that prevent it from working? Do <ul> lists always indent, no matter what?
EDIT: Added CSS code directly to the post.
<ul> elements have a default padding-left of 40px. Remove it with padding: 0; or padding-left: 0;.
JSFiddle Example
You can use your browser's F12 developer tools to inspect elements and their margins or padding in the future.
Have a look at this example it centers horizontally the list where the menu items have no set width.
See here: http://www.cssplay.co.uk/menus/centered.html
The basic CSS you need:
footer {
clear: both;
float: left;
overflow: hidden;
width: 100%;
}
ul {
float: left;
left: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
}
li {
float: left;
position: relative;
right: 50%;
}
Note: I specifically removed the | separators between the LIs as this is not valid HTML.
See the changed example: http://jsfiddle.net/eNQyp/1/ The separators are added as styles on the LIs. It can work your example using this technique and is valid HTML.
I'm trying to get a separator between my nav menu and I found out about the 'li + li' function, but I'm having a very hard time getting the separator in the right place. I'm trying to get it evenly place between the two placeholders centered and all. I've tried messing with the margin and padding properties with no luck.
Here's a jsfiddle along with my code and a picture example on what I'm trying to achieve. Any help is much appreciated, thanks.
http://jsfiddle.net/jzcZ4/
HTML / CSS
<style>
body {
margin: 0;
color:white;;
}
#header {
background-color: #1c2024;
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
#header ul {
margin: 0;
}
#header li {
display:inline;
}
#header li + li {
background:url('http://i.imgur.com/IdVT0cL.png') no-repeat;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>odsfjkoj</li>
<li>odsfjkoj</li>
</ul>
</div>
</div>
</body>
You would use background-size/background-position in order to position the background.
In this instance, just use the shorthand:
UPDATED EXAMPLE HERE
#header li + li {
background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px / 1px 10px no-repeat;
padding-left: 20px;
}
I would make the li elements display:block and apply padding to all of the on left and right.. This way they have equal distances from both sides of the text
Then use 50% on the vertical position of the background image.
#header li {
display:inline-block;
padding: 0 20px;
}
#header li + li {
background:url('http://i.imgur.com/IdVT0cL.png') 0 50% no-repeat;
}
http://jsfiddle.net/gaby/jzcZ4/1/
(I have used a trick of commenting out the whitespace so that it does not affect the layout..)
The html
<div class="wrapContent">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
.wrapper is a fluid div, I am trying to center the floated left lists on the page. Basically be able to have same distances left/right for the first and last li in the ul.
Currently I do:
.wrapContent {
width: 100%;
margin: 0 auto;
}
.ul {
width: 100%;
margin: 0 auto;
}
.li {
width: 250px;
margin: 0 auto;
float: left;
}
Don't float them. (That's kind of an important detail you should've included in your question... :)) Use display instead.
ul {
text-align: center;
}
li {
display: inline-block;
text-align: left; /* optional */
}
Now the lis will each act like inline elements, but preserve the structure of their contents, and you can center them like anything else.
By the way, you don't need to use width: 100%; on block elements; they automatically expand to fit the width of their container.
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }