HTML and CSS Make Several Divs Aligned On The Same Line - html

Question

I am making a website with a navigation menu on the top. I have multiple buttons with dropdown menus. I want to make the buttons in all in a row at the same height and I want the buttons to be in the middle. Here is my code:
/* Links CSS */
a,
a:visited,
a:active {
text-decoration: underline;
color: white;
}
a:hover {
color: red;
text-decoration: underline;
}
/* Element CSS */
html,
body {
margin: 0px;
background-color: white;
}
html {
height: 100%;
width: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
padding-bottom: 6rem;
min-height: 100%;
}
.button,
.games,
.programs,
.apps,
.misc {
font-family: 'Arsenal';
font-size: 18px;
text-decoration: underline;
background: transparent;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1.5%;
padding-right: 1.5%;
cursor: pointer;
border: 0px;
}
.content {
font-family: 'Arsenal';
font-size: 15px;
text-decoration: none;
background-color: white;
border: 0px;
cursor: pointer;
}
.button:hover,
.content:hover,
.games:hover,
.programs:hover,
.apps:hover,
.misc:hover {
background-color: #f0efef;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 0.5%;
}
.games-dropdown {
position: relative;
display: inline-block;
}
.progams-dropdown {
position: relative;
display: inline-block;
}
.apps-dropdown {
position: relative;
display: inline-block;
}
.misc-dropdown {
position: relative;
display: inline-block;
}
.show {
display: block;
}
/* Div CSS */
#page {
margin-top: 0px;
}
#title {
font-family: 'Arsenal';
font-size: 37px;
padding-top: 0.5%;
color: black;
display: inline-block;
cursor: pointer;
}
#links {
margin: auto;
display: inline-block;
overflow: auto;
}
#content {
background-color: white;
border: 1px solid black;
border-radius: 3px;
margin-left: 10%;
margin-right: 10%;
box-shadow: 1px 1.5px #8f8f8f;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #f0efef;
text-align: center;
border-top: 1px solid black;
font-family: 'Arsenal';
font-size: 15px;
}
<!-- HTML -->
<center>
<div id="links">
<!-- Code For Dropdown Menus | Code From http://www.w3schools.com/ | Thanks To Them!-->
<!-- Games Dropdown Menu: Browser and Downloadable-->
<div class="programs-dropdown">
<button class="programs" onclick="games()" title="Games">Games</button>
<div id="gamesDropdown" class="dropdown-content">
<button class="content" onclick="download()">Download</button>
<button class="content" onclick="online()">Online</button>
</div>
</div>
<!-- Programs Dropdown Menu: Windows and Max OS X-->
<div class="programs-dropdown">
<button class="programs" onclick="programs()" title="Programs">Programs</button>
<div id="programsDropdown" class="dropdown-content">
<button class="content" onclick="windows()">Windows</button>
<button class="content" onclick="mac()">Mac OS X</button>
</div>
</div>
<button class="button" onclick="websites()" title="Websites">Websites</button>
<button class="button" onclick="home()" title="Home">Home</button>
<!-- Apps Dropdown Menu: IOS and Android -->
<div id="apps-dropdown">
<button class="apps" onclick="apps()" title="Apps">Apps</button>
<div id="appsDropdown" class="dropdown-content">
<button class="content" onclick="ios()">IOS</button>
<button class="content" onclick="android()">Android</button>
</div>
</div>
<button class="button" onclick="blog()" title="Blog">Blog</button>
<!-- Misc. Dropdown Menu: Chrome Extensions, GitHub, Etc.-->
<div id="misc-dropdown">
<button class="misc" onclick="misc()" title="Misc.">Misc.</button>
<div id="miscDropdown" class="dropdown-content">
<button class="content" onclick="chrome()">Chrome Extensions</button>
<button class="content" onclick="github()">GitHub</button>
</div>
</div>
</div>
</center>

Answer 1

The easiest way to center elements is to use flexbox.
You can learn about it more at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Using flexbox to center elements is actually quite simple. Assuming you have set of elements:
<div class="elements">
<div class="element__item">Element one</div>
<div class="element__item">Element two</div>
<div class="element__item">Some other element</div>
</div>
You can center them horizontally & vertically using css like this:
.elements {
display: flex;
justify-content: center;
align-items: center;
}
You can check this on JSfiddle: https://jsfiddle.net/kf405784/