I have a block of links:
<ul>
<li>Link 1</li>
<li><a class="icon26 icon2">Link 2</a></li>
</ul>
Each link has an accompanying icon. What I'm trying to achieve is 2 things:
1) To centre both the image and the text within the LI tag
2) To block the A tag so it fills the LI tag
Here's what I'm trying to do:
I can achieve 1 or 2 but not both at the same time - any ideas?
At present i'm using a existing sprite solution for the link - this may not be ideal, but it can be changed if a solution is found. Here's the CSS:
.icon26:before
{
background:url(/assets/images/sprite26.png) no-repeat 0 0;
content:"";
display:block;
float:left;
height:2.6rem;
width:2.6rem;
}
.icon1:before
{
background-position:-32px -2px;
}
Here's the remaining CSS for the UL structure:
#nav ul
{
width:100%;
}
#nav ul li
{
float:left;
width:33.33%;
}
#nav a
{
display:block;
line-height:4.6rem;
}
#nav a:before
{
margin:1rem 0.5rem 1rem 0;
}
It's perfectly possible. Remove the float, and use a combination of display: inline-block and vertical-align: middle instead.
Here's the fiddle.
Here's the relevant code:
.icon26:before {
background: url(/assets/images/sprite26.png) no-repeat 0 0;
content: "";
display: inline-block; /* <-- instead of float: left */
vertical-align: middle; /* <-- add to vertically center inline blocks */
height: 2.6rem;
width: 2.6rem;
}
#nav ul li {
float: left;
width: 33.33%;
text-align: center; /* <-- add this to horizontally center inline items */
}
Make the <A> position: absolute; top:0; left: 0;. And make icon and link center align same as you did. This will work.
You can use display: table-cell; property to center align vertically & set width: 1% for full width (justified) menu items.
.nav {
list-style: none;
padding-left: 0;
}
.nav > li {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.nav > li > a {
display: block;
padding: 10px;
text-align: center;
}
Example: http://codepen.io/neilhem/pen/ramzXG
Warning: This method is buggy in Safari 8.0
Related
I'm trying to center <li> items in the page and next to each other without any luck!
I have tried all sorts of ways from display:table; to magin:0 auto; and display:block; and display:inline-block; etc etc... and unfortunately nothing seems to work.
To explain this I've created this JSFIDDLE
Please expand the HTML section of that fiddle to see the menu items in the normal mode (green bar).
the CSS Code that I have been messing around with is this part:
nav {
/*position: absolute;
top: 0;
right: 5px;*/
}
nav li {
float: left;
display: inline-block;
}
nav li a {
font-size: 11px;
color: #9aa6af;
padding: 24px 15px;
display: block;
}
nav li a:hover {color: #000;}
could someone please advise on this issue?
any help would be appreciated.
Thanks in advance.
basicly you can do :
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
Float kills display and cannot be centered
You have to manipulate the <ul> parent, for example in your jsfiddle setting display: table; margin: 0 auto; to the nav will center the nav menu
Try this technique:
/* center nav */
nav > ul { /* center ul */
float: left;
position: relative;
left: 50%;
}
nav > ul > li { /* compensate ul position */
float: left;
display: block;
position: relative;
right: 50%;
}
nav > ul > li > a {
display: block;
}
I've updated your fiddle https://jsfiddle.net/tianes/h1m9aog6/4/
on ul apply this
ul
{
display: table;
margin: 0 auto
}
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
I've been fooling around with HTML/CSS recently, and I'm trying to vertically align the text in an li so that it is in the center. I've seen this question (or some variation of it) asked a bunch of times, so I apologize in advance for asking a question I'm sure you're tired of seeing, but I can't get any of the suggested solutions to work. I'm also trying to avoid setting a specific height/line-height for the li, since I'd like this to adjust to the size of the screen.
Here's the HTML:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Experience</li>
<li>Contact</li>
</ul>
Here's the CSS:
#nav {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: block;
height: 100%;
}
#nav li a:hover {
background: #ccc;
}
I also have this fiddle set up in case you'd like to mess around with it and see if you can get it working. Thanks!
You can just make the line-height of #nav li 25% of the viewport height like so
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
line-height: 25vh; /* this is the only thing you need to add */
}
It's very simple and short and will work with any changes to the text (like font-size etc) or the list. It doesn't matter how many items you add or remove from the list or what changes you make to the height of the #nav or its list items.
See the first working revision of your jsFiddle ;)
Set display: table; on your li
and
display: table-cell;
vertical-align: middle;
on your a
final styles:
#nav li {
display: table;
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
Rev 6 of your fiddle
Try these changes in your css
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
display: table; /* added */
}
#nav li a {
display: table-cell; /* changes from block to table-cell */
vertical-align: middle; /* added */
height: 100%;
}
See the working example here http://jsfiddle.net/t6ryfqzk/7/
Try making your li an inline-block if you want them next to eachother, or as block if you want them underneath eachother. Make sure you give the li elements a fixed width, and set their text-align as centered.
I need to make a menu that on mobile has the links expand to full width. Something similar to this wireframe.
My code so far:
HTML
<div id="shortcuts">
<ul>
<li>Categories</li>
<li>Archives</li>
</ul>
</div>
CSS
#header {
width: 100%;
height: 180px;
background-color: #666;
color: #fff;
}
#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }
#shortcuts ul {
display: table;
width:100%;
height: 180px; /* for testing only */
}
#shortcuts ul li {
list-style: none;
display: table;
height: 60px;
width:100%;
display: block;
vertical-align: middle;
background-color: red; /* for testing only */
border: blue 3px solid; /* for testing only */
}
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: table-cell;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
This is my result so far (colors used only for testing)
If I change the #shortcuts ul li a to display: block;, I can get the desired width. But then the text will not center vertically.
Not a duplicate of CSS Positioning anchor inside li vertically aligned because that is only partial part to vertically align the text. Does not answer how to make the link expand 100% width.
You need to use both "display: block;" and "line-height:60px;" for "#shortcuts ul li a {"
Updated code:
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: block;
line-height:60px;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
Please refer the fiddle :- http://jsfiddle.net/aasthatuteja/6WEW6/
I am having difficulty with centering the navigation bar on this page.
I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it.
#nav ul {
display: inline-block;
list-style-type: none;
}
It should work, I tested it in your site.
Add some CSS:
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
If you have your navigation <ul> with class #nav
Then you need to put that <ul> item within a div container. Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block;
that should center it.
Just add :
*{
margin: 0;
padding: 0;
}
nav{
margin: 0 auto;
text-align: center;
}
The best way to fix it I have looked for the code or trick how to center nav menu and found the real solutions it works for all browsers and for my friends ;)
Here is how I have done:
body {
margin: 0;
padding: 0;
}
div maincontainer {
margin: 0 auto;
width: ___px;
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
ul li {
margin-left: auto;
margin-right: auto;
}
and do not forget to set doctype html5
Your nav div is actually centered correctly. But the ul inside is not. Give the ul a specific width and center that as well.
You could also use float and inline-block to center your nav like the following:
nav li {
float: left;
}
nav {
display: inline-block;
}
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }