<!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>Acima está o CSS que criei para os botões do menu suspenso em HTML. Como eu os alinharia ao centro da tela? Tentei o text-align, mas não funcionou. Uma solução que tentei antes fazia o menu aparecer na lateral do botão, em vez de na parte inferior. Existe algum código que o alinhe ao centro e ainda funcione corretamente como um menu?
Adicionei algumas linhas ao seu CSS: .dropdown{ text-align: center; width:100%;}
O alinhamento de texto coloca os elementos filhos no meio, e a largura de 100% garante que o elemento que o contém (.dropdown) se expanda para a largura apropriada.
Voltei a esta página várias vezes ao longo dos anos e você pode achá-la útil: https://css-tricks.com/centering-css-complete-guide/
Tenta isso? Não sei se era isso que você queria, mas eu acabei de colocar cada botão em outra div com um CSS flexível de https://coreui.io/blog/how-to-center-a-button-in-css/
Coloque todos os elementos do menu suspenso className no novo conteúdo, talvez a chamada de container-dropdown para a classe do elemento. Obtenha esta classe e alinhe com o flexbox.
Exibição: flex; Justificar-conteúdo: centralizar; Alinhar-conteúdo; espaço-ao-redor;
Desculpe pelo meu inglês, sou do Brasil e estou falando pelo meu smartphone, então não posso testar meu código