#How do i center this button?

10 messages · Page 1 of 1 (latest)

woeful sage
#

Been trying so hard to center this button but Im not that knowledgable about HTML/CSS so i really dont know what Im doing, I just shoved as much stuff in the code but its still not owrking unsurprisingly enough

image.png
# 
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #222;
    color: white;
    padding: 50px;
}


.container {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background: #444;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
}


.input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px; 
}


input {
    width: 90%;
    max-width: 250px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 90%;
    max-width: 250px;
    padding: 10px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #005f73;
}
# 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magic 8-Ball</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container" style="width: 200px;margin: 0 auto">
        <h1>Magic 8-Ball</h1>
        <div classs = "input-container">
            <input type="text" id="question" placeholder="Ask a yes/no question">
            <button onclick="getAnswer()">Ask</button>
        </div>
        
        <p id="response"></p>
    </div>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
#

heres the code

pliant mica
empty arch
#

you made a typo

#

u put classs not class

#

this bit specific:

#

<h1>Magic 8-Ball</h1>
<div classs = "input-container">

#

also u can use uhhhhhhhhhhhhhhhhh:
justify-content:center;