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
Related
I am working with this demo: http://blog.templatemonster.com/demos/coding-a-responsive-lightbox-image-gallery-for-website-portfolios/demo/index.html
From here: http://blog.templatemonster.com/2014/05/20/coding-responsive-lightbox-gallery-portfolios-tutorial/
Is there a way to center the thumbnails? It looks like the right is off by about 25px.
Remove the float, set to inline-block instead.
Give the margin 10px to the left and 10px to the right instead of a flat 20px to the right.
From:
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
To:
#portfolio li {
display: inline-block;
float: none;
width: 30%;
max-width: 400px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
I am trying to align the menu to center. I have tried putting in text-align: center !important; in various spots but it didn't do anything.
Anyone have any ideas?
Thanks in advance for your help!
.menu_wrapper
width: 88%;
margin: 0 auto;
#main_menu nav ul
position: relative;
padding-left: 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #FFF;
#main_menu nav ul:after
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
#main_menu nav ul#nav_menu li
cursor: pointer;
display: block;
float: left;
margin-right: 19px;
#main_menu nav ul#nav_menu li a
display: block;
padding: 20px 10px 15px;
font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
color: #fff;
z-index: 2;
#main_menu nav ul#nav_menu li.blob
border-bottom: 1px solid #F00;
bottom: -1px;
height: 1px;
padding-bottom: 0;
position: absolute;
z-index: 1;
The best way to centerize your navigation is to put a display: "table" to your main container. This way you will be sure that everything will be centerized.
.menu_wrapper {
display: table;
margin: 0 auto;
}
change this section
.menu_wrapper
{
width: 88%;
margin: 0 auto;
}
After change
.menu_wrapper
{
width: 88%;
margin: 0 auto;
max-width:88%;
}
Add this style to your CSS:
#main_menu {
margin: 0 auto;
}
Or (if you have a top- or bottom-margin to preserve):
#main_menu {
margin-right: auto;
margin-left: auto;
}
The first example is shorthand for setting vertical margins to zero and horizontal (left and right) margins to automatic. The vertical doesn't matter so much, but the auto setting for your horizontal margins will push the element equally away from the left and right sides of its containing element (or your document, depending on your HTML), thereby centering it.
Note that this horizontal-centering method works only with non-floated, block-displayed, statically or relatively positioned elements—which I'm guessing is fine for your app, but we can't know without seeing your HTML.
In html,
try this
<center><div class='menu_wrapper'> your content </div></center>
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;
}
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))
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;
}