Início / user-30365621

Emerald Udoh's questions

Martin Hope
Emerald Udoh
Asked: 2025-04-25 05:12:15 +0800 CST
  • 5

<!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?

html