<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
What's Up At Pearson?
</title>
<style>
.dropbtn {
font-family: Monospace;
font-size: 50px;
margin-top: 5px;
margin-bottom: 5px;
border-color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f5e162;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
hr{
border-color:#ff5c4a;
}
.dropdown-content a:hover {background-color: #f25757;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ddd;}
</style>
</head>
<body>
<h1 style = "background-color: red; color: white; font-family: Monospace; font-size: 38px;
margin: 0; padding: 10px">
What's Up At Pearson?
<img align = "right"width = "50px" height = "50px"
src = "https://upload.wikimedia.org/wikipedia/en/8/89/Lester_B_Pearson_High_School_Calgary_new_logo.png">
</h1>
<br>
<hr style = "border-top: 5px solid yellow">
<p style = "text-align: center; font-size:20px; font-family: Monospace">
Welcome to the website What's Up At Pearson? A semi-interactive place full of interviews
from your fellow students. Have some insight into different struggles students in
different subject areas may have while also learning some tips they may have that could
help you. (This is a new computer science project, sorry if website looks bad :[)
</p>
<h2 style = "text-align: center; font-size: 30px; font-family: Monospace">
Different Subject Areas Listed Below
</h2>
<hr>
<div class = " dropdown">
<button class = "dropbtn">Math</button>
<div class = "dropdown-content">
<a href = ""> Math</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn"> Sciences</button>
<div class = "dropdown-content">
<a href = ""> Physics</a>
<a href = ""> Chemistry</a>
<a href = ""> Bio</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">Social Studies</button>
<div class = "dropdown-content">
<a href = "">Social Studies</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">English</button>
<div class = "dropdown-content">
<a href = "">English</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">CTS</button>
<div class = "dropdown-content">
<a href = "">Animation</a>
<a href = "">Architecture</a>
<a href = "">Computer Science</a>
<a href = "">Construction</a>
<a href = "">Pre-Engineering</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">Fine Arts</button>
<div class = "dropdown-content">
<a href = "">Art</a>
<a href = "">Dance</a>
<a href = "">Drama</a>
<a href = "">Technical Theatre</a>
<a href = "">Culinary</a>
</div>
</div>
<hr>
<div class = "dropdown">
<button class = "dropbtn">Personal</button>
<div class = "dropdown-content">
<a href = "">Buissness Managment</a>
<a href = "">Gym</a>
<a href = "">Yoga</a>
</div>
</div>
<hr>
</body>
</html>Above is the css I made for dropdown menu buttons in html. How would I align them to the center of my screen? I have tried text-align but that hasn't worked. One solution I tried before just made the menu come out of the side of the button rather than the bottom. Is there any code that aligns it ot the centre while still working properly as a menu?
I've added a couple lines to your CSS: .dropdown{ text-align: center; width:100%;}
Text-align puts child elements in the middle, and the 100% width ensures the containing element (.dropdown) expands to the appropriate width.
I've come back to this page several times over the years, and you may find it useful: https://css-tricks.com/centering-css-complete-guide/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
What's Up At Pearson?
</title>
<style>
.dropbtn {
font-family: Monospace;
font-size: 50px;
margin-top: 5px;
margin-bottom: 5px;
border-color: black;
}
.dropdown {
position: relative;
display: inline-block;
text-align: center;
width:100%;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f5e162;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
hr{
border-color:#ff5c4a;
}
.dropdown-content a:hover {background-color: #f25757;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ddd;}
</style>
</head>
<body>
<h1 style = "background-color: red; color: white; font-family: Monospace; font-size: 38px;
margin: 0; padding: 10px">
What's Up At Pearson?
<img align = "right"width = "50px" height = "50px"
src = "https://upload.wikimedia.org/wikipedia/en/8/89/Lester_B_Pearson_High_School_Calgary_new_logo.png">
</h1>
<br>
<hr style = "border-top: 5px solid yellow">
<p style = "text-align: center; font-size:20px; font-family: Monospace">
Welcome to the website What's Up At Pearson? A semi-interactive place full of interviews
from your fellow students. Have some insight into different struggles students in
different subject areas may have while also learning some tips they may have that could
help you. (This is a new computer science project, sorry if website looks bad :[)
</p>
<h2 style = "text-align: center; font-size: 30px; font-family: Monospace">
Different Subject Areas Listed Below
</h2>
<hr>
<div class = " dropdown">
<button class = "dropbtn">Math</button>
<div class = "dropdown-content">
<a href = ""> Math</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn"> Sciences</button>
<div class = "dropdown-content">
<a href = ""> Physics</a>
<a href = ""> Chemistry</a>
<a href = ""> Bio</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">Social Studies</button>
<div class = "dropdown-content">
<a href = "">Social Studies</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">English</button>
<div class = "dropdown-content">
<a href = "">English</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">CTS</button>
<div class = "dropdown-content">
<a href = "">Animation</a>
<a href = "">Architecture</a>
<a href = "">Computer Science</a>
<a href = "">Construction</a>
<a href = "">Pre-Engineering</a>
</div>
</div>
<hr>
<div class = " dropdown">
<button class = "dropbtn">Fine Arts</button>
<div class = "dropdown-content">
<a href = "">Art</a>
<a href = "">Dance</a>
<a href = "">Drama</a>
<a href = "">Technical Theatre</a>
<a href = "">Culinary</a>
</div>
</div>
<hr>
<div class = "dropdown">
<button class = "dropbtn">Personal</button>
<div class = "dropdown-content">
<a href = "">Buissness Managment</a>
<a href = "">Gym</a>
<a href = "">Yoga</a>
</div>
</div>
<hr>
</body>
</html>