PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 8, 2022

[FIXED] How to 'center' <div > for mobile

 November 08, 2022     alignment, center, css, menu, navigation     No comments   

Issue

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>


Solution

You could use

margin: auto;

Then your css definition would be as follows

#centeredmenu {
   clear:both;
   min-width: 220px;
   margin: auto;
}


Answered By - rasso
Answer Checked By - Katrina (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing