+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: why isn't my menu centering? (/showthread.php?tid=6020805)
why isn't my menu centering? - craigOwnsYou - Oct 30, 2019
I'm making my Dad a website. I have this CSS code and I am trying to center the menu before I get to everything else. The reason is I'm trying to get a basic structure going to work with for the site.
I looked it up on Stack Overflow a couple of places and made some progress, but the menu isn't centering:
Code
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
#menu {
justify-content: center;
}
div.button {
float:left;
margin-right: 20px;
}Lol, once I get a good structure for the website before I continue to the next portion of the website.
Hoping to add in more pages but for now I'm just looking to get a basic structure going.
But first, I need to get the menu working.
Please advise.
UPDATE!!!
I got it working!!!
Nevermind.
RE: why isn't my menu centering? - Eagle 95 - Oct 31, 2019
Well, it'd be nice to post a solution for other people that might face the same or similar problem. 😉
RE: why isn't my menu centering? - Ganja - Oct 31, 2019
Also, for future reference: please also post the relevant HTML.
RE: why isn't my menu centering? - craigOwnsYou - Oct 31, 2019
(Oct 31, 2019 12:03 AM)Eagle 95 Wrote: Well, it'd be nice to post a solution for other people that might face the same or similar problem. 😉
OK, will do. Except that now my code has another problem with a different feature. But here is my current code:
Code
#vcontainer {
display: table;
height: 100%;
width: 1000px;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.menu {
justify-content: center;
text-decoration: none;
}
div.button {
display: inline-block;
margin-right: 20px;
}
.button a {
text-decoration: none;
font-size: 15px;
border-radius: 20%;
color: purple;
font-family: fantasy;
font-weight: bold;
border: 5px solid purple;
background: yellow;
}
.button a:hover {
border: 10px solid blue;
background:cyan;
font-size: 25px;
color: blue;
}
#lawOfficeName {
justify-content: center;
margin-top: 50px;
font-size: 50px;
font-family: fantasy;
color: cyan;
background-color: navy;
}HTML code will be posted soon as well. I just have to find time to get my dad anonymized in the code.