So on my website I'm trying to get my Nav menu to align center but it's not working for some reason. I tried applying
margin-right: auto;
margin-left:auto;
I also tried other CSS tricks but it still won't align center. Can someone look at my site with firebug and tell me what I'm doing wrong?
my website is http://dev.pti-world.com
I thought I knew CSS decently well but obviously not since I am having this little problem I can't figure out.
If you want to center it you can use margin: 0 auto;
There are 2 lines you need to change in your css:
You have the width of the ul on 100%.
You have the ul with float left.
Solution:
#megaMenu ul.megaMenu {
float:left; <---- delete this because with a float you cant center it.
}
and change this
#megaMenu.megaMenuHorizontal ul.megaMenu {
width: 950px;
margin: 0 auto;
}
try to wrap your navi again and give the wrapper
text-align:center;
and your navi
display:inline-block;
Give your ul centered text, and make your lis not floated and inline-block:
#megaMenu ul.megaMenu {
text-align: center;
}
#megaMenu ul.megaMenu > li {
float: none;
display: inline-block;
}
That will work back to Internet Explorer 8.
Related
So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.
It's a ul element and it has li inside with text. Here are some pictures about the problem
Full webpage:
On mobile:
I just want to adjust the text or the ul element to fit without making another line.
Here's the css ul element:
.main-menu ul {
display: table !important;
background-color: #98B709;
padding: 0;
margin: 0;
text-align: center;
}
And the li element:
.main-menu ul li {
display: inline-block;
float: left;
position: relative;
list-style: none;
}
I tried a lot of things but nothing works...
Thanks and hope you guys can help me!
I found a very useful Stackoverflow post that should answer your question:
Responsive Font Size
And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.
Try to use different font size e.g
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
Here is a variation that does not use display:table, which I always avoid.
The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.
If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.
I use this code block all the time; it's a common problem.
#main{
width:100%;
}
#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}
I am using this template on my website: http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle: http://jsfiddle.net/uPw85/
What I need help with:
1) Center the menu on the page, as you can see on the link it's left aligned.
2) Still keep the text in the drop down menus aligned to the left (just as in the link above).
I've searched this page and on Google a lot before asking for help and none of the results have worked for me. I've tried just about every tip I've found but the menu still won't be centered for me, the only thing that happens is that the text in the drop down menu is centered but I want to keep it to the left.
I've tried with multiple variations of these in different places (nav, menu, li, ul) in the CSS but with no luck:
display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;
EDIT 2/10, 1 PM EST: I appreciate you guys trying to help but so far none of the answers you've given has helped.
Try this:
ul.sf-menu {
text-align: center;
}
ul.sf-menu li {
display: inline-block;
}
ul.sf-menu li a {
display: block;
}
ul.sf-menu ul {
text-align: left;
}
EDIT:
I've edited the JSfiddle: http://jsfiddle.net/uPw85/3/
EDIT 2:
Remove float: left in ul#nav, or just remove the id="nav" in the ul-tag in the html
In order to center the menu you need to set the width of the child div to be smaller than a set width of a parent. Additionally need to remove the float of the menu as floating an element effectively takes it out of the parent div.
Try setting the following:
ul.sf-menu {
float: none;
width: 760px;
margin: 0 auto;
}
Works when inspecting element. Another alternative would be to try the following code.
ul.sf-menu {
float: none;
display: table;
margin: 0 auto;
}
Just add:
ul#nav {
float:left;
padding-left: 80px;
}
I have spent like 4 hours and still cannot fix it, I have 2 divs, one floated left and one right, in left div I have text and in right I have a <*ul>, when I use text-align:center; based on media query for the left template it works perfectly, but I also want the <*ul> to be centered when the browser width is reduced. Please take a look here and let me know what I am doing wrong and where exactly ? http://goo.gl/OJ5OHt THANKS A LOT to anyone who helps me get out of this..
The problem is not so much the UL but the children LI, that are floated left.
You have two options:
A)
Set a fixed width to UL and center via margin auto:
.social-icons ul {
margin: 5px auto;
width: 220px;
}
B) Remove the float from the children LI, set them to inline and set their children A to inline-block (and then UL text-align would work):
.social-icons ul {
text-align: center;
}
.social-icons ul li {
display: inline;
float: none;
}
.social-icons ul li a {
display: inline-block;
}
The only ways I can see to do this is to add the following to your ul style under your media query:
margin: 0 auto;
width: 217px;
It needs to be a fixed width.
OR
Change your ul to:
text-align: center;
And your li and a items to:
display: inline-block;
Either way should work.
Im having trouble vertically aligning text inside a image button.
Vertical-align: middle doesnt seem to work.
Here what i got so far:
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:32px;
float:left;
text-align: center;
font-size: 12px;
list-style:none;
vertical-align: middle;
}
Simplest way to fix this is to give a line-height for the li same as that of its own height.
http://jsfiddle.net/KHBG4/
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("http://placehold.it/78x32");
float:left;
width: 78px;
height:32px;
text-align: center;
font-size: 12px;
list-style:none;
line-height:32px;
}
vertical-align can only be used with inline elements. That having been said, I know img tags are "inline-block" so not really sure what to expect there, but I don't think you mean to vertically align the img, but rather the text, so you need a separate inline tag (span would do fine) and use "position" and "vertical-align" to set it up right.
I have had a recent post about that very issue here:
How can I resize a background-image to fit my element (without set width) in CSS 2?
I would suggest the simplest route of giving your button padding-top (and reducing it's height by that number of course).
It's not truly "auto-centered", as it won't be centered if you change the height without updating the padding, but - it works and it's clean and easy, and simple to update.
The navigation bar at top contains width: 100% height: 50px and is fixed positioned to the top.
However, the UL tag inside is always keeps positioning itself to the left side. It should be centered.
I tried so many things, like making a secondary div and giving it margin: 0 auto, giving
UL margin: 0 auto, making left %30 and right %30, float: center etc.
Am I missing something? What's the reason I can't position it to the center?
On '#navlist' change text-align: left to be text-align: center
On '#navlist ul' add the property display: inline-block;
You will need a div that wraps the ul and set its margin to "0px auto" just like you tried with the ul.
<div style="width:600px; margin:0px auto;">
<ul>...</ul>
</div>
I have had good luck centering a UL with these styles:
<style>
#container {text-align:center;}
#container ul {display:inline;}
#container ul li {display:inline;list-style-type:none;}
</style>
Generally, I have to steer clear of display:inline-block as we still develop for older IE browsers that don't acknowledge 'inline-block'.
you need to set and width for the Navigation bar, so it can be centered.
#menu-main-nav {
width: 990px;
}
make that div with some fix width and float. left or right.
then inside it.. make UL and with property of margin:0 auto;
div {
width:200px;
height:auto;
float:left;
}
ul {
margin:0 auto;
}