Putting in a menu and trying to center the text

[Dankriss]

Hi guys


I have been writing my own theme based on water drop and for the life of me I can't center the text in the menu I have created.


I have tried just about everything!  including taking out the float adding margins and still no joy... I have looked on several websites and still no joy... I am going nuts...


Please can someone just tell me what I need to change...


CSS

Code Select Expand

.mainnav {
    overflow: hidden;
    background-color: #8c0005;
height: 45px;
width: 100%;
border-bottom: 1px solid transparent;
    position: relative;
    z-index: 270;
    -webkit-transition: .2s opacity;
    transition: .2s opacity;
border-bottom-color: #958d66;
}


/* Navbar links */
.mainnav a {
float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


/* Links - change color on hover */
.mainnav a:hover {
    background-color: #ddd;
    color: black;
}[code]


HTML


[code]<div class="mainnav">
  <a href="#">Main Website</a>
   <a href="#">Test</a>
   <>[code]


This is the link to the site... [font=Verdana][size=78%][url=http://krissharmsworth.rocks/testmedia/index.php]http://krissharmsworth.rocks/testmedia/index.php[/url][/font][/size]


I need it to look like the main menu on this site... [font=Verdana][size=78%][url=http://www.krissharmsworth.rocks/test/]http://www.krissharmsworth.rocks/test/[/url][/font][/size]


I know it is something simple but boy I can't get it to work!


Thanks in advance.


Kriss :)

[ron4mac]

"Main Website" and "Test" are centered in the background (when hovered). Did you resolve this?  Did you clear your cache?

[Dankriss]

I cleared the cache about 5 times... LOL


I haven't solved it no...


Even tried to change the main HTML page still no luck...


Tried the 'absolute' and everything I could think of... I use the W3C schools website which is usually damn good!  go there and see the stupid mistake I have probably made but nope nothing


Kriss

[ron4mac]

I think you'll need another block of separation (div within div) to achieve that.
Something similar to:

Code Select Expand

<div class="mainnav">
  <div style=" margin: 0 auto; float: none;">
    <a href="#">Main Website</a>
    <a href="#">Test</a>
  </div>
</div>

[Dankriss]

Ok I will have a go... as I already have a class called centered for something else...


Wish me luck as I go and try it 


Kriss

[Dankriss]

ok I think I have got it... well it looks a lot better...


I added another div and added a class in CSS...

Code Select Expand

.menucenter {
margin: auto;
float: none;
display: block;
width: 50%;
text-align: center;
}[code]


Thanks

[ron4mac]

Change your width from a percentage to "fit-content".

[Dankriss]

Ok will do


Kriss