I want to centre align the menus , I tried using text-align but still no result
Following is the html code:
<div id="menu" class="clearfix">
<ul>
<li>HOME</li>
<li>WATCH</li>
<li>TAGS</li>
<li>CHANNELS</li>
</ul>
<br style="clear:both">
</div>
And the css used:
#menu {
width: 100%;
margin-bottom: 2em;
margin-top: 5px;
border-top: 1px solid #333;
border-bottom: 1px solid #515152;
text-align: center;
background-image: url("./images/menu.gif");
}
#menu ul {
font: bold 11px Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
float: left;
display: inline;
background-color: black;
}
Any suggestions?
Thank You.
You have float:left on the li. Take that line out:
#menu li {
display: inline;
background-color: black;
}
Since you don't need float anymore, you can also get rid of the <br style="clear:both"> as it'll just put a blank line below the menu now.
Here's a tutorial on how to properly use float.
Floating is often used to push an image to one side or another, while
having the text of a paragraph wrap around it
Set
#menu ul{
text-align:center;
}
and then set
#menu li{
margin:0px auto;
}
This will leave top and bottom margins as 0px but will automatically detect the left and right margins and make them equal and centered.
Also, remove
float:left;
from
#menu li
I believe you are trying to center the contents of your #menu tag with the text-align:center. This won't work because you have the 'ul' inside it. What I would do is remove the text-align:center from the #menu tag.
Then in the '#menu ul' tag I would add:
margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */
In order for a block level element to be centered on a page you need to provide a width that is smaller than the width of the parent element it is nested in and then set the margin to be auto for the left and right sides.
Related
Sorry for asking stuff that's already been explained a lot but none of the solutions that I saw so far on StackOverflow is actually working for me(table-cell, text-align, vertical-align...nothing).
Here's the deal: all of my code is inside a #box div which is the one dealing with the centering and containing all the elements. The first div after this is #menu and it's like this:
<div id="menu">
<img src="img/logo.jpg" alt="logo">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
Nothing special actually, it's pretty simple. My CSS looks like this:
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 1280px; }
#menu img {
float: left; }
#menu ul {
float: right;
list-style: none;
line-height: normal; }
#menu li {
display: table-cell;
padding-left: 20px;
vertical-align: middle; }
Be ware that I'm using a basic CSS Reset to avoid most problems when I'll go test cross-browsing.
The problem here is no matter which of the solutions I try from StackOverflow, only the IMG or the UL vertically centers or they're slightly non-aligned.
What I'm asking for is: what's the BEST WAY today to do such a simple task with html/css only(the img size won't change) and have a logo image and a menu on its right perfectly center on the vertical space in a div with known width and height?
I obviously cleaned cache, refreshed, did everything so I'm sure changes are taking effect...I'm just missing something really stupid probably but I really can't center both.
To better show what I want I made this, this should be really a basic menu setup yet something ain't working as expected. Here's my desired outcome, just remember I didn't write any rule to move img and #menu ul from the left/right borders because, obviously, right now they're on the side borders...I'll give margins later.
perhaps this is what you want? Fiddle
you just need to make the li to inline-block, add line-height to the div #menu with the same value as height, and add style vertical-align: middle to the img, here's the full CSS needed with the same HTML as yours
#menu {
background-color: #babadc;
height: 100px;
line-height: 100px;
margin: 0 auto;
width: 1280px;
}
#menu img {
height: 50px;
vertical-align: middle;
}
#menu ul {
margin: 0;
float: right;
list-style: none;
}
#menu li {
display: inline-block;
padding-left: 20px;
/*vertical-align: middle; this is not needed because already declare line-height in parent*/
}
note that the vertical-align: middle for image work because it's following the other inline or inline-block element, and the inline or inline-block element is in the middle because of the line-height that's set on the #menu. And you also need to make sure that the container width is always greater then the total of image width and ul width for this to work
If the height is known and fixed, I would suggest
ensure that there is no top/bottom padding/margins on ul, li and a. Set line-height to 1 on a
manually set top margins for img and ul based on the height of nav and height of images. ul height will be your font-size once all extra padding is removed. (margin-top = nav height minus half of image/ul height)
See this fiddle: http://jsfiddle.net/no5wo77a/1/
Maybe you can work from this?
Fiddle
HTML
<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg" alt="logo" height="80%" width="auto">
CSS
body {
outline: 0;
margin:0;
}
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 100%;
position: relative;
}
#menu img {
float: left;
top: 10%;
position: absolute;
}
#menu ul {
float: right;
list-style: none;
line-height: normal;
background-color: #FF0000;
height: 20px;
margin-top: 40px;}
#menu li {
display: table-cell;
padding-left: 20px;
}
Just look at the fiddle....
.list{
list-style: none;
display: inline-block;
text-align: left;
margin:0;
padding:0;
margin-left:-20px;
}
.list > li {
display: inline-block;
width: 100px;
height : 100px;
border: 1px solid black;
margin: 0;
padding: 0;
margin-left: 20px;
margin-bottom: 20px;
}
<div style="text-align:center">
<ul class="list">
<script>
for (var i=0;i<60;i++)
document.write("<li></li>");
</script>
</ul>
</div>
I am trying to make the UL center in the DIV.
Requirements:
UL should be just large enough to hold the LI elems.
LI elems should align left within the UL (either through float: left, text-align: left or otherwise)
Tried these but failed:
Why won't my Div center itself in its parent?
Centering an UL inside a DIV
How to horizontally align ul to center of div?
#mark's solution does not work:
Remove
text-align: left;
from .list
Updated fiddle here.
by default, ul element is like a block, that means it will take 100% width of it's parent.
So if you want it to be center, you must set its width to a specific pixel or change the display attribute:
.list{display:inline-block}
Your containing element has to have a width defined; you can't just say text-align: center for it to work.
Do this:
Updated Fiddle
Essentially you're just defining a few properties on the containing element and took out the margin-left: -20px. in your code.
This question already has answers here:
How do I justify a horizontal list?
(10 answers)
Closed 7 years ago.
I have used the code from this question to create a horizontal menu where each item is evenly spaced.
Here is my version:
<div id="navigation">
<ul>
<li class="first">
Home
</li>
<li>
About us
</li>
<li>
What we cover
</li>
<li>
Monitoring agencies
</li>
<li>
Publishers
</li>
<li>
News
</li>
<li>
Contact us
</li>
<span></span>
</ul>
</div>
And the CSS:
#navigation {
text-align: justify;
}
#navigation ul span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
#navigation ul {
display: inline;
list-style: none;
}
#navigation ul li {
display: inline
}
#navigation ul li a {
display: inline;
border-right: solid 1px #ccc;
}
#navigation ul li.last a {
border-right: none;
}
Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?
Here is a fiddle.
I've added an answer here.
Hack Using Extra Elements for the Spacer Motif
Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/
Consider the following HTML:
<div id="navigation">
<ul class="navigation">
<li class="first">
Home
</li>
<li class="spacer-motif">|</li>
<li>
About us
</li>
<li class="spacer-motif">|</li>
...
<li class="spacer-motif">|</li>
<li>
Contact us
</li>
</ul>
</div>
I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).
The CSS is as follows:
#navigation {
padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
display: table;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: table-cell;
text-align: center;
width: 1%; /* force cell to shrink-to-fit text */
outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
width: 10%; /* force spacers to take up a lot of space */
outline: none;
}
#navigation ul li a {
white-space: pre;
}
The layout is based on using table display types.
For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.
For li, use display: table-cell and text-align: center.
The trick is to force the table cells to shrink-to-fit the text labels by
setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force
the spacers to expand (evenly) to fill up the line.
To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).
Cleaning Up The Semantics
The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.
The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.
However, if the elements are a problem, they could be inserted using jQuery or JavaScript.
IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7
here take a look at this fiddle HERE
I made some small adjustments. I changed display:inline; to float:left; and centerd the text.
The space is coming from the 5px padding i gave to the
ul li a
I would use display: table on ul and display: table-cell on li for this.
and even padding on both sides for the a tag
Depending on the spacing your after, something like this should work:
#navigation ul li a {
padding-right: 10px;
}
Change the 'px' value to your needs.
You can try something like this:
#navigation ul li a {
display: inline;
margin-right: -14px;
padding-right: 14px;
border-right: solid 1px #ccc;
}
But it might not be cross-browser.
http://jsfiddle.net/gjFYf/2/
I found that padding-right: 30px; in #navigation ul li a worked nicely.
I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.
New styles...
#navigation ul li.line {
display: inline-block;
*display: inline;
zoom: 1;
width: 1px;
background-color: #ccc;
height: 24px;
position: relative;
top: 5px;
}
#navigation ul li a {
display: inline;
line-height: 36px;
height: 36px;
text-decoration: none;
font-size: 18px;
color: #14328C;
font-weight: bold;
}
New Html snippet...
<li>
Publishers
<li class="line" />
</li>
It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.
Its also now semantically incorrect.
Fiddle.
I have made a functional CSS navigation-bar, except for some fugly CSS side-effects --
I am trying to vertically center the text in each list block, and vertical-align: middle was not working. Instead, I am using padding-top: 13px, but this renders the padded area without the background-color of the rest of the list element, and the display: inline block styling of the link does not extend to the padded area either! (a:hover is affecting only the area below the padding)So how can I vertically center text in list elements without these CSS problems?
Here is the relevant CSS:
/* header section */
#header
{
padding-left: 115px;
margin-bottom: 10px;
}
#main-menu
{
list-style-type: none;
}
#main-menu li
{
border: 1px solid black;
text-align: center;
padding-top: 13px;
color: #666;
font-family: "Lucida Console";
font-variant: small-caps;
letter-spacing: 2px;
/* for block layout */
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 153px;
height: 32px;
}
#main-menu a:link, a:visited
{
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 100%;
height: 100%;
background-color: #eee;
}
#main-menu a:hover, a:active
{
background-color: #bbb;
}<br /><br />
...and here is the relevant HTML:
<!-- header section -->
<div id = "header">
<ul id = "main-menu">
<!-- no spaces between list elements when all on the same line! -->
<li>home</li><li>about</li><li>cart</li><li>login</li><li>sign up</li>
</ul>
</div> <!-- end of header section -->
Things that I changed:
Changed the link to display as a block element.
Removed the padding at the top of the li elements.
Added that padding height to the height of the li elements.
Set the line-height to the height of the li elements.
Some formatting
http://jsfiddle.net/gtr053/7yrX7/
Try setting a line height
line-height: 13px;
I don't know much to anything but I've used this just now and it works
Entered into the Quick CSS of General styling
li {
display:inline;
padding: 0px 50px;
}
The first px brings the menu items down, and the second spreads them apart.
I have an CSS issue with a menu.
Through CSS I´ve added padding to li's.
The li's have display: inline.
It works when I set to inline-block, but I want to know why it doesn't work with inline. In my understanding padding should work with inline elements.
HTML
<header>
<nav>
<ul id="mainmenu">
<li>Home</li>
<li>Users</li>
<li>Rankings</li>
<li>In the press</li>
<li>Blog</li>
</ul>
</nav>
</header>
CSS
body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }
Working demo
http://jsfiddle.net/4QLmp/
PS browser is Chrome Canary
The padding is there, but since the <li>s are defined as inline, they're aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:
header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}
so that the <ul>s get pushed down, you'll see the padding present. inline-block doesn't follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.
header nav li { display: inline; padding: 10px 5px; }
UPD:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, "the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property".