I'm having an issue with centering some li's that are inside of a ul element. Here is the relevant code:
ul.nav {
width: 1000px;
margin: 0 auto;
list-style-type: none;
}
.nav li {
float: left;
width: 300px;
}
#government {
clear: left;
}
I've been trying various things to make it work like making the li's have text-align: center; or giving them margin: 0 auto; but nothing seems to be working. I've spent hours trying to figure out the problem, so any help would be very much appreciated. Here is a screenshot of what my situation looks like:
I'm trying to get the li's to be horizontally centered inside that ul. I can't just do the math and set the margin because the width will be dyanmic and probably won't be the same for each li.
This should give you a good start:
ul.nav {
width: 1000px;
margin: 0 auto;
list-style-type: none;
text-align: center; /* to center horizontally child inline elements */
}
.nav li {
display: inline-block; /* Set to inline-block instead of float: left */
width: 300px;
}
Update
To get into to rows, make your ul element have a smaller width.
e.g.
ul.nav {
width: 800px; /* Smaller width */
margin: 0 auto;
list-style-type: none;
text-align: center; /* to center horizontally child inline elements */
padding-left: 0;
}
Fiddle
Related
I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.
The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.
Here is my code:
.title{
text-align: center;
}
nav{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background: blue;
}
li {
text-align: center;
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background: red;
}
ul {
padding: 0;
}
The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.
I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:
nav > ul { margin-left: 0; padding-left: 0; }
Sorry for asking stuff that's already been explained a lot but none of the solutions that I saw so far on StackOverflow is actually working for me(table-cell, text-align, vertical-align...nothing).
Here's the deal: all of my code is inside a #box div which is the one dealing with the centering and containing all the elements. The first div after this is #menu and it's like this:
<div id="menu">
<img src="img/logo.jpg" alt="logo">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
Nothing special actually, it's pretty simple. My CSS looks like this:
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 1280px; }
#menu img {
float: left; }
#menu ul {
float: right;
list-style: none;
line-height: normal; }
#menu li {
display: table-cell;
padding-left: 20px;
vertical-align: middle; }
Be ware that I'm using a basic CSS Reset to avoid most problems when I'll go test cross-browsing.
The problem here is no matter which of the solutions I try from StackOverflow, only the IMG or the UL vertically centers or they're slightly non-aligned.
What I'm asking for is: what's the BEST WAY today to do such a simple task with html/css only(the img size won't change) and have a logo image and a menu on its right perfectly center on the vertical space in a div with known width and height?
I obviously cleaned cache, refreshed, did everything so I'm sure changes are taking effect...I'm just missing something really stupid probably but I really can't center both.
To better show what I want I made this, this should be really a basic menu setup yet something ain't working as expected. Here's my desired outcome, just remember I didn't write any rule to move img and #menu ul from the left/right borders because, obviously, right now they're on the side borders...I'll give margins later.
perhaps this is what you want? Fiddle
you just need to make the li to inline-block, add line-height to the div #menu with the same value as height, and add style vertical-align: middle to the img, here's the full CSS needed with the same HTML as yours
#menu {
background-color: #babadc;
height: 100px;
line-height: 100px;
margin: 0 auto;
width: 1280px;
}
#menu img {
height: 50px;
vertical-align: middle;
}
#menu ul {
margin: 0;
float: right;
list-style: none;
}
#menu li {
display: inline-block;
padding-left: 20px;
/*vertical-align: middle; this is not needed because already declare line-height in parent*/
}
note that the vertical-align: middle for image work because it's following the other inline or inline-block element, and the inline or inline-block element is in the middle because of the line-height that's set on the #menu. And you also need to make sure that the container width is always greater then the total of image width and ul width for this to work
If the height is known and fixed, I would suggest
ensure that there is no top/bottom padding/margins on ul, li and a. Set line-height to 1 on a
manually set top margins for img and ul based on the height of nav and height of images. ul height will be your font-size once all extra padding is removed. (margin-top = nav height minus half of image/ul height)
See this fiddle: http://jsfiddle.net/no5wo77a/1/
Maybe you can work from this?
Fiddle
HTML
<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg" alt="logo" height="80%" width="auto">
CSS
body {
outline: 0;
margin:0;
}
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 100%;
position: relative;
}
#menu img {
float: left;
top: 10%;
position: absolute;
}
#menu ul {
float: right;
list-style: none;
line-height: normal;
background-color: #FF0000;
height: 20px;
margin-top: 40px;}
#menu li {
display: table-cell;
padding-left: 20px;
}
Just look at the fiddle....
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 :)
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;
}
I have a main div id called #main and then a list ul li...
Here is the css:
#main {
display:block;
}
#main ul {
list-style: none outside none;
margin: 0 0 20px;
padding: 0;
}
etc...
The problem is that when the content grows I get the issue shown on the attached image:
Add overflow: auto; in your main
#main {
display:block;
overflow: auto;
}