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;
}
Related
To vertically center <a> tag i found this solution in this answer
you may use a pseudo element displayed as an inline-box using full
height of li and vertical-aligned to midlle. DEMO
body, html {
height:100%;/ needed for demo */
}
nav {
height: 50%;/* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;/* show me li , for demo */
}
nav ul li:before {
content:'';
height:100%;
display:inline-block;
vertical-align: middle;
}
My question why we have to use a pseudo element ?
Why it's not working when I delete the pseudo element and I put just :
a {
height:100%;
display:inline-block;
vertical-align: middle;
}
Is the vertical-align have to apply to a first element (:before) and the other (<a>) will follow the vertical alignment ?
Why pseudo works?
With the before and after pseudo-elements, we can insert virtual elements before or after an element's content. They both work the same way, except that one inserts the content before the element and the other inserts the content after.
Pseudo elements forces some contents to be there in the html page and in the css stylesheet you apply a empty content with the height of 100% ie. with your tag height and now the content is occupying the space before or after (as you use pseudo) and to that align vertically with options top, middle, or bottom:
try this fiddle : just set height: 100px; and then increase manually like 200px, 300px then you will understand the exact reason
Without vertical alignment it's going to bottom as it is 100% heighty and if you use vertical-align:middle then you'll notice how the pseudo is working.
You may understand by seeing this picture:
UPDATE:
using pseudo element you are getting vertically center the text because of known height as you used height:100%; on pseudo element. As soon you will removed the height the layout will be broken.
As a tag is inline element so you made it block level element. but vertical-align: middle; only work with display:table-cell. but wait you have to use display:table in li element also.
Check the DEMO. so this piece of code will work..
a{
height:100%;
display: table-cell; /*replaced with display:inline-block*/
vertical-align: middle;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;
display:table; /*add this line*/
width:100%; /*add width as well*/
}
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.
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.
I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?
JS Fiddle: http://jsfiddle.net/F6R9C/
HTML
<div>
<span>
Visit website
View project
</span>
</div>
CSS
div { background:red;overflow:hidden }
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}
Another option would be to give the span display: table; and center it via margin: 0 auto;
span {
display: table;
margin: 0 auto;
}
One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):
div {
background: red;
overflow: hidden;
text-align: center;
}
span a {
background: #222;
color: #fff;
display: inline-block;
/* float:left; remove */
margin: 10px 10px 0 0;
padding: 5px 10px
}
http://jsfiddle.net/Adrift/cePe3/
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
Applying inline-block to the element that is to be centered and applying text-align:center to the parent block did the trick for me.
Works even on <span> tags.
Spans can get a bit tricky to deal with. if you set the width of teach span you can use
margin: 0 auto;
to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.
Here is the jsfiddle I cam e up with off the top of my head: jsFiddle
EDIT:
Adrift's answer is the easiest solution :)
only css div you can center content
div{
display:table;
margin:0 auto;
}
http://jsfiddle.net/4q2r69te/1/
I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:
div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}
I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.
I'm trying to center horizontally a divs in a div with 100% width. The div conteiner is "#post-area" and all divs inside, have a class ".post".
this is the link: http://bit.ly/VOqkhv
When resize the browser is possible to see that not work good, in fact, all divs are not centering with the menu. How can fid this? I tried also with margin: auto; but nothing .
Thank you so much in advance.
Set the 100% div to position:relative then the element you want to center to position:relative; margin: 0 auto;
That is because they are floating to the left. You can use inline-block instead.
Add text-align: center; to #post-area
Remove float: left; and add display: inline-block; vertical-align: top; text-align:left; to .type-post