This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can we center those divs “IE7 and up” with variable width horizontally without using inline-block?
I am trying to create a menu which has a background image spanning the full width of the screen with the menu contents constrained to 980px in the middle with the menu contents then aligned within the center of that.
Like this: http://d.pr/i/eYcV
But I don't want to constrain the area anymore than 980px as the menu items may increase in the future.
I have the following structure in HTML:
<div class="menu">
<nav class="primary_menu">
<ul id="menu-primary">
<li>Home</li>
<li>Blog</li>
</ul>
</nav>
</div>
With the following CSS:
/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}
Thanks
There're a lot of ways to achieve what you're asking for ... simplest is by using inline-blocks like this
.primary_menu ul{
text-align: center;
}
.primary_menu ul li{
/*float: left;*/
display:inline-block;
margin: 0 20px;
*display : inline; /* for IE7 and below */
zoom:1;
}
Check my answer here : Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?
Changing your .primary_menu li's from float: left to display: inline-block should get the menu items center aligned
try this demo or this demo2
.menu{
background:#ccc;
padding:10px;
}
.primary_menu{
background:#999;
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
margin:0px;
overflow:auto;
}
.primary_menu ul li{
float: left;
line-height:4;
padding:5px;
}
Working jsFiddle - take a look:
http://jsfiddle.net/dane/FyThW/21/
/* Menu */
.menu{
background-color: gray;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
background-color: lightgray;
}
.primary_menu ul{
list-style-type: none;
text-align: center;
}
.primary_menu ul li{
display: inline-block;
}
Related
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height.
HTML
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
CSS
nav
{
height: 30%;
width: 100%;
}
nav ul
{
height: 100%;
margin: 0px;
}
nav ul li
{
height: 33%;
width: 100%;
vertical-align: middle;
}
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;
}
edit
If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):
body,
html {
height: 100%;
}
nav {
height: 70%; /* height set for snippet demo purpose, could be really too much */
width: 100%;
}
nav ul {
height: 100%; /* will follow height, inherit height value , set in nav if any avalaible */
margin: 0px;
}
nav ul li {
height: 33%;
/* see me and my center*/
box-shadow: inset 0 0 0 1px;
background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);
}
nav ul li:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
a {
display: inline-block;
vertical-align: middle;
}
<nav>
<ul>
<li>Login
</li>
<li>Register
</li>
<li>Programmes<br/> Offered
</li>
</ul>
</nav>
If you can use flexbox, you can get away with the following css:
CSS
ul li a {
display:flex; // Enables flexbox
justify-content: center; // Center on main axis
align-items: center; // Center on cross axis
}
Update ( using auto margins )
You can also do it like this:
ul li { display:flex }
li a { margin: auto }
/* These rules are just to make things easier to see. */
nav {
margin: 0 auto;
margin-top: 5rem;
border: 1px dotted green;
width: 100%;
}
ul {
padding: 0;
display: flex;
justify-content: space-around;
}
li {
height: 3rem;
padding: 2rem;
border: 1px dotted red;
}
/* Here are what I am trying to illustrate */
ul li {
display: flex;
}
a {
margin: auto;
/* or adjust them one by one, by targeting
the ones you want and setting
using each margin like this:
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
*/
}
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
vertical-align aligns inline elements with their siblings.. unless used in a table cell.
I don't think there's a by-the-book way of vertically aligning.. but this should work:
D E M O
nav ul li
{
background:#f1f1f1;
height: 33%;
width: 100%;
border-top:1px solid #e0e0e0;
}
nav ul li a
{
display:block;
position:relative;
top:50%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
}
Have you tried with
nav ul li a
{
height: 33%;
width: 100%;
vertical-align: 5px; //(you can make it 10px or -10px, just so it fits your style)
}
Your text is within the a tag, so adding a in the css may solve your problem :)
After checking similar questions to this, none of the recommended solutions worked for me. I am trying to align li elements to be vertically centered in their div:
HTML:
<div id="navi">
<ul id="navilist">
<li><a href="#home">
<img src="Images/homelnk.jpg" alt="Home"/></a></li>
<li>SGU</li>
<li>SGJR</li>
<li>REGISTRATION</li>
<!--<li>PHOTO GALLERY</li>-->
<li>SCHOLARSHIP</li>
<!--<li>CONTACT US</li>-->
<!--<li>SOCIAL MEDIA</li>-->
<li>MERCHANDISE</li>
<li>FORMS</li>
<li>PAY FOR SGU</li>
</ul>
</div>
CSS:
#navi {
position: relative;
height: 50px;
width:auto;
background: #ed7a4f;
vertical-align:middle;
}
#navi li{
display: inline;
list-style-type:none;
padding: 0px 2px 5px 2px;
}
How would I maintain a horizontal list, but center the text vertically?
There's some tricks to getting vertical alignment to work. Here's a good stackoverflow answer about it. There's a good comment to the answer which explains why you need the empty span...
Well, I figured I'd offer you an alternative. You use an empty <span>
because vertical-align aligns elements relative to their siblings. If
an element has no siblings, it will not be vertically aligned.
I also made an update to your fiddle
Here's a snippet of the css:
span {
vertical-align: middle;
display: inline-block; }
ul{
margin:0; padding:0;
display:inline-block;
list-style-type:none;
vertical-align:middle; }
#navi {
height: 100px;
background: #ed7a4f;
}
#navi li{
display: inline-block;
padding: 5px; }
You don't need vertical alignment, you just need to reset your CSS and use padding. You need to adjust accordingly to the size of your image.
#navi {
background: #ed7a4f;
}
#navi ul, navi li {
margin:0;
padding:0;
list-style:none;
}
#navi li {
display: inline-block;
}
#navi a {
display:block;
padding: 0px 5px 5px 5px;
}
i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page.
i tried margin:0 auto but it wont work
here is my code:
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</div>
Change your last two CSS rules to:
li {
display:inline-block;
}
#menu {
background-color:#98bf21;
text-align:center;
}
jsFiddle example
margin: 0 auto; only works on items that have defined widths. However, the way you currently have it written, each a tag is attempting to center, when you really want to center the ul. Here is a great way to center that when you don't know the width of your ul. Use these styles in your header, ul and li elements. Add styling to your a tags to suit.
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}
What's going on here is we're setting the header to full width, and then pushing the ul half way across the width of the browser. Then we push the li's back half the width of the ul, which now centers them on the page.
Here is a link with a very helpful tutorial about doing this very thing: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Good luck!
Use the inline-block css magic :)
JSFiddle
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}
I had the same problem until I read this post and decided to center the text in the "nav".
So basically your ul should be in a nav so you can text-align: center the nav area.
nav {
width: 75%;
margin: auto
}
#menu {background-color: #98bf21}
.container{padding: 0.10em}
.cell-row {display:table; width:100%}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
a:link, a:visited {
font-weight: bold;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {background-color: #7A991A}
#media (max-width: 500px) {
.mobile {
display: block;
width: 100%;
text-align: center
}
nav {
width: 100%;
margin: auto
}
}
<nav>
<div id="menu" class="cell-row" style="text-align: center">
<div class="container cell cell-middle mobile">Home</div>
<div class="container cell cell-middle mobile">News</div>
<div class="container cell cell-middle mobile">Articles</div>
<div class="container cell cell-middle mobile">Forum</div>
<div class="container cell cell-middle mobile">Contact</div>
<div class="container cell cell-middle mobile">About</div>
</div>
</nav>
Add the following css:
ul {
margin: 0 auto;
display: inline-block;
}
This will make the ul fit its contents and then be centered in its container.
I'm looking for a quick cross browser solution to my need for auto margins.
I have a simple list:
<ul>
<li>text</li>
<li>text</li>
<li class="possibly_last">text</li>
</ul>
With a width of 600px.
What I need is CSS code to make sure there is an even margin between each <li>.
So that they stretch across the full 600px evenly.
I may need to as a "last" class, but that's fine.
I just want a browser friendly way to do this.
Any help would be great, Thanks!
Try this:
<style>
li {
display: block;
float: left;
width: 32%;
}
</style>
If that does not work, try this:
<style>
li {
display: block;
float: left;
width: 200px; // or less
}
</style>
I take it you mean you don't want a margin after the last li? In that case, use the CSS :last-child selector:
ul li
{
margin-right: 10px;
width: 190px; // 190px = 200px - margin width
display: inline-block;
zoom: 1;
*display: inline;
}
ul li:last-child
{
margin-right: 0px;
}
Please note that this will NOT work in any internet explorer except IE9. Sorry :-(
As a fix, you could use JavaScript (notably jQuery) to edit the CSS of the last child.
An example here: http://jsfiddle.net/WtLAm/2/
Are you intending to float the list items so they stretch horizontally to fill the ul that way? if so, something like
<style type="text/css" media="screen">
ul {width: 600px;}
li {display: inline; float: left; width: 33%;}
</style>
would work.
I think this can't be done with margins, I suggest you this solution:
http://jsfiddle.net/wY5t6/
css:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
width: 600px;
overflow:hidden;
}
If you need to set padding, background etc on list item than you can do it this way:
http://jsfiddle.net/wY5t6/1/
HTML:
<ul>
<li><span>text</span></li>
<li><span>text</span></li>
<li class="possibly_last"><span>text</span></li>
</ul>
CSS:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
border: 1px green dotted;
width: 600px;
overflow:hidden;
}
li span {
background: yellow;
padding: 5px;
}