How to 'center' <div > for mobile
15,068
Solution 1
You could use
margin: auto;
Then your css definition would be as follows
#centeredmenu {
clear:both;
min-width: 220px;
margin: auto;
}
Solution 2
I believe that adding margin: 0 auto;
to #centeredmenu
does the trick for you...
@media not all and (min-width: 780px) {
#centeredmenu { max-width: 220px; }
}
#centeredmenu {
margin: 0 auto;
clear:both;
min-width: 220px;
}
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:1px 0 0 1px;
padding:0;
float: left;
position: relative;
left:50%;
top:11px;
}
#centeredmenu ul li a {
z-index: 999;
display:block;
margin:0;
padding:.4em .2em .4em;
line-height:1em;
background:#ddd;
text-decoration:none;
color:#444;
width: 70px;
font-size: 13px;
font-weight: 100;
text-align: center;
font-family: Proxima Nova;
}
#centeredmenu ul li.active a {
color:#fff;
background:#D2383C;
}
#centeredmenu ul li a:hover {
background:#36f; /* Top menu items background colour */
color:#fff;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#777777; /* Top menu items background colour */
color:#fff;
}
<div id="centeredmenu">
<ul>
<li class=""><a href="#">2014</a></li>
<li class="active"><a href="#">2013</a></li>
<li class=""><a href="#">2012</a></li>
<li class=""><a href="#">2011</a></li>
<li class=""><a href="#">2010</a></li>
<li class=""><a href="#">2009</a></li>
<li class=""><a href="#">2008</a></li>
<li class=""><a href="#">2007</a></li>
<li class=""><a href="#">2006</a></li>
<li class=""><a href="#">2005</a></li>
</ul>
</div>
Author by
Kamil
Updated on June 04, 2022Comments
-
Kamil almost 2 years
So it works for desktop, even I'm sure I'm doing it the wrong way, but it aligns itself to left on mobile.
I tried to adding some code to @media but couldn't figure out.
I was messing mainly with right: float: padding:
any align commands don't work
@media not all and (min-width: 780px) { #centeredmenu { max-width: 220px; } } #centeredmenu { clear:both; min-width: 220px; } #centeredmenu ul { margin:0; padding:0; list-style:none; float:right; position:relative; right:50%; } #centeredmenu ul li { margin:1px 0 0 1px; padding:0; float: left; position: relative; left:50%; top:11px; } #centeredmenu ul li a { z-index: 999; display:block; margin:0; padding:.4em .2em .4em; line-height:1em; background:#ddd; text-decoration:none; color:#444; width: 70px; font-size: 13px; font-weight: 100; text-align: center; font-family: Proxima Nova; } #centeredmenu ul li.active a { color:#fff; background:#D2383C; } #centeredmenu ul li a:hover { background:#36f; /* Top menu items background colour */ color:#fff; } #centeredmenu ul li:hover a, #centeredmenu ul li.hover a { /* This line is required for IE 6 and below */ background:#777777; /* Top menu items background colour */ color:#fff; }
<div id="centeredmenu"> <ul> <li class=""><a href="#">2014</a></li> <li class="active"><a href="#">2013</a></li> <li class=""><a href="#">2012</a></li> <li class=""><a href="#">2011</a></li> <li class=""><a href="#">2010</a></li> <li class=""><a href="#">2009</a></li> <li class=""><a href="#">2008</a></li> <li class=""><a href="#">2007</a></li> <li class=""><a href="#">2006</a></li> <li class=""><a href="#">2005</a></li> </ul> </div>