I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.
Here is the CSS:
Here is the page:
Thank you!
-Mike
Try adding margin:auto in the css menu
#cssmenu {
background: #000000;
height: 44px;
position: relative;
width: 595px;
margin: auto;
}
FIDDLE
Add margin: 0 auto; to #CssMenu
#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
position: relative;
display: block;
background: #000000;
height: 32px;
width: 100%;
z-index: 500;
text-align: center; /*add this to center your li itens*/
white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/
#cssmenu > ul > li {
display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
vertical-align: top; /*add this to make you li itens align by top*/
position: relative;
padding: 0;
}
Related
I am trying to properly center a UL. Even though I used display:table and the correct margin: 0 auto... still it doesn't work properly. It doesn't go the center.
What am I doing wrong?
CSS for the UL and the LI
.container {
position: relative;
display:table;
margin-left:auto;
margin-right:auto;
}
.container li {
margin: 30px 30px;
padding: 0;
display: inline;
clear: none;
float: left;
width: 310px;
height: 370px;
position: relative;
list-style: none;
}
Here is the LIVE version. When adjusting the page you will notice that the UL is docked to the left side of the page.
UPDATED
http://codepen.io/mariomez/pen/doJvJz?editors=010
Notes: the problem is almost resolved. The only issue is that the LI components are also center aligned which is not visually good for me. How can I align them to the left and keep the UL centered?
Position the .container with text-align: center;, disable floating the list elements and use display: inline-block; instead of display: inline; for them:
.container {
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
.container li {
margin: 30px 30px;
padding: 0;
display: inline-block;
clear: none;
width: 310px;
height: 370px;
position: relative;
list-style: none;
}
Demo: JSFiddle
Novice here! I'm looking to adjust some code for this site: http://www.lakeofstars.org
The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.
Here's the code as it stands:
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px; /* Height of the footer */
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif);
background-repeat: repeat-x;
background-position:bottom;
}
#footer .structure {
height: 140px;
width: 94%;
}
#footer .structure li {
display: inline-block;
margin: 10px 10px 0 0;
float: left;
}
#footer .structure li img {
height: 65px;
width: auto;
}
You need to remove float: left; from #footer .structure li.
Try to use line-height and vertical-align: middle; for vertical aligment and text-align: center; for horizontal:
#footer .structure {
text-align: center;
}
#footer .structure ul {
line-height: 140px;
vertical-align: middle;
}
#footer .structure li {
display: inline-block;
}
Or you can use flexbox technique
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px;
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif) scroll 50% 50%;
background-repeat: repeat-x;
background-position:bottom;
}
add for #footer .structure ul - text-align: center;
remove for #footer .structure li - float: left
#footer .structure ul {
text-align: center; < -- add
}
#footer .structure li {
display: inline-block;
vertical-align: middle;
margin: 10px 10px 0 0;
/* float: left;*/ <-- remove
}
Remove width:auto ... give values in percentage....
#footer .structure li img
I have setup a fiddle: http://jsfiddle.net/BaWC8/2/
You can see that I have a wrapper div containing an ul with li's. The li's have a with of 25% so they get evenly spread across the 'page'. The wrapping div has a border of 1px. Since all li's also have a border of 1px, it looks like they all have a border of 2px (which I want).
Now. This looks all good on a desktop but when you open it on a mobile device (iphone, android) you see a small spacing on the right side of the wrapper between the last li and the wrapper border.
Here is the code (html):
<div class="wrap">
<ul>
<li><span>aaaa</span></li>
<li><span>bbbb</span></li>
<li><span>cccc</span></li>
<li><span>dddd</span></li>
</ul>
</div>
Css:
body{
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
float: left;
width: 100%;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
I do not understand why so I hope someone here can help me out.
Remove the float and width from the .wrap and ul.
The border will on .wrap will collapse, which you can either solve with a clearfix, or by adding overflow:auto.
Here is my working CSS:
body {
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
overflow:auto;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
A working fiddle, at least on iOS: http://jsfiddle.net/designingsean/BaWC8/7/
You see a small spacing because .wrap width is 100%+2px(border-width*2).
If you want border (or padding) don't expand element's width/height,
you may use box-sizing: border-box; http://css-tricks.com/box-sizing/
add this css-property to .wrap and you will not see "small spacing" anymore))
I have a div black bar, and a logo image that currently sits at the left as the first child element of this div. The logo image has a height larger than the black bar's fixed height of 42, so it juts out (this is a style choice)
I want to include a menu in the black bar, so I added a UL menu as the next child element.
However, it sits as the bottom of the div, outside the black bar area, because it sits inline with the logo.
I want to push the menu to the top, above the black area
I've tried every possible combination of floats, display: inline/inline-block, margin-top, padding-top, etc. but to no avail.
Anyone got a solution?
Thanks!!!
HTML
<div id="black-bar">
<img src="..."></img>
<ul>
<li>Programs & Projects</li>
<li>Recipes</li>
</ul>
</div>
CSS (This is only the lat of many combos I've tried)
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul{
line-height: 119px;
display: inline;
vertical-align: top;
}
#black-bar ul li{
display: inline;
}
JSfiddle
CSS
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline;
}
#black-bar ul li a {
vertical-align: top;
line-height: 40px;
color: white;
text-decoration: none;
}
You can take the line-height property from the black header.
Then you can display li as inline-block and apply padding as requited.
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
/*line-height: 119px;*/
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline-block;
padding:10px 15px 0 0;
}
see fiddle: http://jsfiddle.net/Jywd3/
How to center navigation horizontally inside the div? The CSS should be responsive preferably.
HTML:
<nav id="centermenu">
<ul>
<li>Business</li>
<li>Specialities</li>
<li>Contact us</li>
</ul>
</nav>
well, the css was, and changed the left: 50% to 25%, nada. hope this was enough
#centermenu {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
left: 50%;
display: block;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}
Make sure your browser is not rendering in quirks mode. You should have a DOCTYPE specified on the first line of the HTML file to render in standards mode:
<!DOCTYPE html>
In standards mode, this works (tested and working for me):
#centermenu {
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}
#centermenu ul {
list-style: none;
display: block;
margin: 0 auto;
text-align: center;
}
#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}
#centermenu {
display:block;
width:100%;
text-align:center;
}
#centermenu > ul {
display:inline-block;
text-align:left;
overflow:auto;
}
#centermenu > ul > li {
float:left;
}
ul {
display: block;
margin: 0 auto;
}
u need to specified the width for ul, if you use margin: 0 auto; no need float: left; or left: 50%
#centermenu ul {
margin: 2 auto;
display: block;
width: 600px;
}
or make ul display inline;
#centermenu ul {
display: inline;
}