Question

所以我试图改变主箱的宽度，它目前一直向右，但我希望整个东西都集中在一起。我如何正确实现这一目标？

HTML

<!DOCTYPE html>
<html>
    <body>
        <style>
            label {
                display:block;
            }
        </style>
        <main>
            <form>
                <fieldset>
                    <legend>Kontakta oss</legend>
                    <div>
                        <label for='name'>Name:</label>
                        <input type="text" name='name'>
                    </div>
                    <div>
                        <label for='email'>Email:</label>
                        <input type="email" name='email'>
                    </div>
                    <div>
                        <label for='phone'>Telefonnummer:</label>
                        <input type="text" name='phone'>
                    </div>
                    <div>
                        <label for='meddelande'>Meddelande:</label>
                        <textarea name='meddelande'></textarea>
                    </div>
                    <div>
                        <input type='submit'>
                    </div>
                </fieldset>

            </form>
        </main>
    </body>
</html>

CSS

.main {
    width: 100px;
    display:flex;
    align-items:center;
    justify-content:center;
}

Answer 1

 <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title> </title>

        <style>
            label {
                display:block;
            }
             main { 
    display:flex;    width: 100%;
    align-items:center;
    justify-content:center;
}
        </style> 
</head>
    <body>
        <main>
            <form>
                <fieldset>
                    <legend>Kontakta oss</legend>
                    <div>
                        <label for='name'>Name:</label>
                        <input type="text" name='name'>
                    </div>
                    <div>
                        <label for='email'>Email:</label>
                        <input type="email" name='email'>
                    </div>
                    <div>
                        <label for='phone'>Telefonnummer:</label>
                        <input type="text" name='phone'>
                    </div>
                    <div>
                        <label for='meddelande'>Meddelande:</label>
                        <textarea name='meddelande'></textarea>
                    </div>
                    <div>
                        <input type='submit'>
                    </div>
                </fieldset>

            </form>
        </main> 
    </body> 
    </html>

Answer 2

只需更新主要元素的css

看看这个 -

main {
    width: 100px;
    text-align: center;
    margin: 0 auto;
}

<!DOCTYPE html>
<html>
    <body>
        <style>
            label {
                display:block;
            }
        </style>
        <main>
            <form>
                <fieldset>
                    <legend>Kontakta oss</legend>
                    <div>
                        <label for='name'>Name:</label>
                        <input type="text" name='name'>
                    </div>
                    <div>
                        <label for='email'>Email:</label>
                        <input type="email" name='email'>
                    </div>
                    <div>
                        <label for='phone'>Telefonnummer:</label>
                        <input type="text" name='phone'>
                    </div>
                    <div>
                        <label for='meddelande'>Meddelande:</label>
                        <textarea name='meddelande'></textarea>
                    </div>
                    <div>
                        <input type='submit'>
                    </div>
                </fieldset>

            </form>
        </main>
    </body>
</html>

如何更改元素周围主框的宽度？

2 个答案: