I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
Related
JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
So I have two things in a header, namely an image in a h1 and a nav. Here's a simplified version of the HTML:
<header>
<h1><img src="../img/logo.png"></a></h1>
<nav>
<ul>
<li>blahblah</li>
</ul>
</nav>
</header>
I want to make the h1 element go to the left and the nav go to the right. I simply gave the header a width and absolutely positioned both h1 and nav like so:
header {height: 120px;}
h1 {position:absolute; left: 0;top:0;}
nav {position:absolute; right:0; top:0;}
It works, but I find it somewhat inelegant. Is there any other nicer way to do it?
Yes, you should be able to just float them left and right without the positioning.
header {
height: 120px;
}
h1 {
float: left;
}
nav {
float: right;
}
usually you just float the elements in their respective corners, such as
header { overflow:auto; }
header h1 { float: left; }
header nav { float: right; }
overflow is used in order for header to retains a height around the elements, but it can be removed in some cases.
Float property of CSS allows you to float the element to right or left but if you are looking to indent the element then you may need to use
text-indent: 10px;
you may add this in a class and add this class to elements wherever you need the Indentation
HTML
<div class="wrapper join-links">
<ul>
<li>Whatever</li>
<li>Something</li>
</ul>
</div>
CSS
.join-links li {
float:left;
margin-right:20px;
}
Is it somehow possible to align both links "centered" or "justified" inside of the sorrounding wrapper div?
http://jsfiddle.net/CRrmL/
edit: And I also wonder if I can align them right?
Change float: left to display: inline to give you:
.join-links li {
display: inline;
margin-right:20px;
}
You can then use text-align on the parent div.
Example centre align
Example right align
To align alinks to the right or center you need use text align and display inline or inline-block to li element. Float property transforms any element to a block.
http://jsfiddle.net/CRrmL/15/
http://jsfiddle.net/CRrmL/16/
You can do this through the common margin hack for centering:
.join-links ul{
margin:0 auto;
}
Then you need to set the li elements to be displayed in line:
.join-links li {
display:inline;
}
You can make the links justified like this. Just define a class to both li and float first li to left and second li to right.
Check this example
So I have a simple list thats set out like below
<ul class='my-videos'>
<li>
<a class='show-more' href='' title=''>Show More</a>
</li>
<ul>
I am trying to get the .show-more to be center aligned. I have got this far
ul.my-videos li .show-more
{
display:inline-block;
margin:0 auto;
}
Now this doesn't work. I have setup a JSFiddle here http://jsfiddle.net/6HHKf/
Any ideas on this?
PS I want to keep the anchor as inline or inline-block so that the width isn't 100%
UPDATE
There are other elements in the li, so text-align is out of the answer
ul.my-videos li .show-more {
margin:0 auto;
border:#aaa 1px solid;
width: 100px;
display: block;
}
if you want center an element width margin: 0 auto you need to set the width
and also, you need display:block
check jsfiddle here: http://jsfiddle.net/6HHKf/5/
Simply set the CSS for the list item to center align the text.
.my-videos li { text-align: center; }
Easy, just add text-align:center; to the li.
Edit
Since you need to cope with other mystery elements in the li this may work http://jsfiddle.net/6HHKf/6/
If it's an option to use an extra span within the a element, you could use relative positioning with left +/- 50%
http://jsfiddle.net/ptriek/6HHKf/8/