Trying to put menu text right in the middle. No luck so far, and people here proved to be very helpful. :) text align center usually helps with most of the questions that came up here. Didn't help me though. What am i doing wrong?
<header>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
</div>
</header>
#navmenu {
margin-left:auto;
margin-right:auto;
height:60px;
width:836px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline-block;
margin-left:1px;
background-color:#3D3D3D;
width:49%;
height:40px;
color:#FFF
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
If the text will always be on a single line, you can vertically align the text by making the line-height the same height as the container.
Add line-height: 40px to your li:
#navmenu li {
...
line-height: 40px;
}
Did you try by giving table-cell (instead of inline-block) for display property for #navmenu li ?
I believe that will work.
I quickly grabbed this snippet out of one of my css files.
This was used to create a top right corner nav bar.
ul {
position: absolute;
top: 20px;
right: 35px;
}
ul li {
display: inline;
text-transform: lowercase;
text-align: right;
padding-left: 10px;
}
Hope that helps
If you want to center the whole menu container, use position:relative, and than apply the margin:auto property. If you need to center the individual links, i hope giving width and text-align center will surely work, as it is a block. If not, you can always use padding-left and padding-right to achieve that. But the width of the menu items will be scaled according to it's content. One more thing, try giving pixels instead of percentage and check. Hope this helps you.
Related
I've been having trouble centereing a navigation bar on blogger. I seems like a very easy thing to do normally but this time its troublesome.
Take a look at the website: Center Navigation
I've tried text-align, margin:0 auto; etc etc. Nothings seems to work!
If someone could help me out that would be great, cheers
Current code:
.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;
}
li {
display:inline-block;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
Both text-align:center and margin:0 auto can logically only work if the element to be centered has a non-default width, since that is otherwise auto, which for a block element is 100%. An element that fills up its entire parent cannot be centered.
Give ul.nav a fixed width and it will center.
To use text-align:center you will need to restrict the ul as well, for example by also making it display:inline-block. See this sample.
Remove float: left; to .tabs .widget li, .tabs .widget li
Try This:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}
Instead of:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}
add text-align:center; to the parent div
I am trying to vertically align some text within a list li and having issues.
First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS:
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
}
I tried to see if there was a way of getting the text to align to the middle.
I tried:
vertical-align: middle;
which didn't work, so then I tried:
line-height: 50px;
which also did not work, so I tried:
display: table
which worked, but the image disappears from the list item....
Does anyone know of a way to get this to work?
The issue using list-style-image is that you cannot align with the text, the best thing to do is to use background-image for li element, and then use padding-left for your li elements.
Buggy Demo (The issue which you are facing)
Demo
ul li {
background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
}
ul {
margin: 50px;
}
you can have
<li><span style="top:-5px; position:relative;">
Text shifted 5px upper
How about
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
position: relative;
}
ul li span {
position: absolute;
top: (x)px;
left: (x)px;
}
If you go to http://www.leapfm.com and scroll down to the footer you'll see that the links are on the right bottom hand side.
How can I put em' in the center?
Please use Firebug or inspect element for easy access to the code.
So I'll start top down from the div class="footer", you'll need to change or add these css properties:
.footer {
display: block;
text-align: center;
width: auto;
}
The li for the links inside footer:
.footer li {
display: inline-block;
}
Then the a tags inside the above li tags:
.footer li a {
display: inline-block;
float: none;
}
Enclose the li-elements properly in a ul, and set margin: 0 auto on it.
Instead of using li-elements as separators, you could use li + li:before { content: "|"; }
Remove the CSS float:right for the class declaration.
.footer a {
float: right; //Remove this
display: block;
margin-right: 5px;
color: black;
}
Try to enclose the <li> tag with <ul>
and after that add this css :
.footer {
display: block;
text-align: center;
}
.footer ul {
margin: 0 auto;
}
.footer li {
float: left;
display: inline-block;
}
Remove float:right; from .footer a and enclose you are li tags with ul
<div class="footer">
<ul>
<li>Submit |</li>
<li class="divider"></li>
<li>FAQ | </li>
<li class="divider"></li>
<li>Contact Us </li>
</ul>
</div>
First of all you should enclose each of these LI's in a UL or OL.
Contrary to what the others have pointed out, you dont need to give the UL/OL a margin of 0 auto because it will already take up the entire space it has. Or give a display:block to the footer and text align. So when you set a text-align:center to the li; they will magically go in the center of the element. No need to center the parent element(the ul).
Also, if you want to do things the right way, get rid of the br tag and use margin or padding to space your way around your layout.
So; all you need to add to your code is this:
ul{
text-align:center;
}
ul li{
display:inline-block;
}
Sorry to put this in an answer. I would have rather be a comment to the top answer. I dont have enough rep for that. Not glory hunting!
Hope this helps
Please look at the following jsFiddle and alter appropriately. I basically want the text to be perfectly in the middle of the images height.
http://jsfiddle.net/e7AV9/1/
You could set it as a background image and center it there and then add a bit of left padding like this http://jsfiddle.net/e7AV9/5/
I'm partial to absolute positioning.
CSS
* {
font-family: Verdana;
font-size: 10px;
}
nav > ul li:nth-child(2) a:before {
position: absolute;
top: 9px;
left: -2px;
content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}
nav a {
color: #626262;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
width: 150px;
display: inline-block;
}
nav ul li {
position: relative;
display: inline-block;
list-style: none;
}
HTML
<nav>
<ul>
<li>Home</li>
<li>Community</li>
</ul>
</nav>
You could also put the image directly in the HTML and style it that way: http://jsfiddle.net/e7AV9/10/
Here's the problem with CSS:content:
I feel that we shouldn't use the content declaration at all. It adds
content to the page, and CSS is meant for adding presentation to the
page, and not content. Therefore I feel that you should use JavaScript
if you want to dynamically generate content. CSS is the wrong tool for
this job.
Another solution can be just to add vertical-align: top such as this example: http://jsfiddle.net/Vh6wP/.
Also here's a link on vertical-align: http://css-tricks.com/what-is-vertical-align/ for other values.
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; }