I'm struggling to center a set of tabs in different sections on my website. I've tried using an unordered list and <p> tags within a <div>, but nothing seems to be working. I've experimented with <position: absolute>, <display: inline>, and other CSS properties, but I can't seem to get it right. Any help would be appreciated!
For now, the tabs aren't functional; I just want them to look like tabs without worrying about jQuery. Here's a snippet of my HTML and CSS:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>STARSHIP CHRONICLES</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>STARSHIP CHRONICLES</h1>
<p id="topmenu">SEARCH - FAQ - FEEDBACK - ABOUT</p>
</div>
<div id="ships">
<!--ships go here-->
</div>
<div id="tabs">
<ul id="tabs">
<li id="tabs">OVERVIEW</li>
<li id="tabs">STATS</li>
<li id="tabs">IMAGES</li>
<li id="tabs">CONTEXT</li>
</ul>
</div>
<div id="geninfo">
<table>
<tr>
<td><p class="info">SHIP NAME:</td>
<td><span class="text">Recursant-Class Star Destroyer</span></td>
</tr>
<tr>
<td><p class="info">ALLIANCE:</td>
<td><span class="text">Commerce Guild</span></td>
</tr>
<tr>
<td><p class="info">ORIGIN:</td>
<td><span class="text">Star Wars</span></td>
</tr>
<tr>
<td><p class="info">SIZE:</td>
<td><span class="text">1,187 meters</spam></td>
</tr>
</table>
</div>
<div id="bottommenu">
<p id="length">0m-479m</p>
<p id="length">480m-1299m</p>
<p id="length">1300m-1999m</p>
<p id="length">2000m-4999m</p>
<p id="length">5000m+</p>
</div>
</div>
</body>
</html>
CSS
body {
background: url(../images/spacebg.jpg) no-repeat fixed ;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 50%;
height: 100px;
border: solid 1px #0071BC;
background-color: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info {
margin-left: auto;
margin-right: auto;
position: relative;
}
#geninfo {
margin-top: 100px;
width: 35%;
height: 200px;
background-color: #000000;
border: solid 1px #0071BC;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#tabs {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
width: 100px;
text-decoration: none;
}
#tabs ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#tabs li {
margin: 0 0.5em 0 0;
}
h1 {
color: white;
font-family: OratorSlant;
font-size: 50px;
margin-left: auto;
margin-right: auto;
}
#topmenu {
color: #ffffff;
font-family: DinBlack;
font-size: 15px;
}
table {
padding: 0px;
margin: 0px;
line-height: 1px;
}
.info {
color: #0071BC;
font-size: 25px;
font-family: Captain;
}
.text {
color: #0071Bc;
font-size: 18px;
font-family: DinReg;
}
#bottommenu {
position: absolute;
bottom: 5px;
display: inline-block;
}
#length {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
display: inline-block;
margin: 5px;
width: 200px;
height: 20px;
}