Выровнять контактную форму на странице по центру рядом с текстом и полями ввода? [ОБНОВЛЕНО]

ProgramBox

Выровнять контактную форму на странице по центру рядом с текстом и полями ввода? [ОБНОВЛЕНО]

Post author:admin
Запись опубликована:28 декабря, 2022
Post category:Вопросы по программированию

#html #forms #alignment

#HTML #формы #выравнивание

Вопрос:

РЕДАКТИРОВАТЬ: я обновил как CSS, так и html. Я разобрался с центрированием, но у меня все еще возникают проблемы с выравниванием меток и полей. Мне нужно, чтобы поля ввода и метки были выровнены так, чтобы по их центру проходила идеальная линия, по существу разделяющая их, потому что метки накладываются друг на друга, а поля ввода накладываются друг на друга. Приведенный ниже код уже похож на то, как я хочу, чтобы он выглядел, за исключением того, что форма находится на левом краю, а мои метки и поля ввода не выровнены идеально.

Пока это моя форма:

 <div style="text-align:center">
            <form>
                <div>
                    Name: <input type="text" name="Name" size="40"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Address: <input type="text" name="Address" size="50"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    City: <input type="text" name="City" size="25"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    State: <input type="text" name="State" size="25"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Zip: <input type="text" name="Zip" size="25"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Email: <input type="text" name="Email" size="40"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Subscribe to our mailing list?
                    <br/>
                    <input type="radio" name="AddToList" value="yes" checked="checked" />Yes
                    <input type="radio" name="AddToList" value="no" />No
                    <br/>
                    <br/>
                </div>
                <div>
                    Comments:<br/>
                    <textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
                    <br/>
                    <br/>
                    <input type="submit" />
                    <input type="reset" />
                </div>
            </form>
        </div>

Пока что единственный CSS, который у меня есть для этой формы, это:

 form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}

Это то, чего я пытаюсь достичь:

Любая помощь или совет были бы полезны и высоко оценены, я действительно просто ошеломлен этим. Я пытался использовать некоторые методы центрирования для таблиц, ни один из которых не работал.

Ответ №1:

 check this i just positioned it with css

 <!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
    position: relative;
    bottom: 2px;
}
input{
    position: relative;
    margin-top: 10px;
}

.text{
    display: flex;
    justify-content: center;
}

.text{
    display: flex;
    justify-content: center;
    
}

</style>

</head>

<body>
    <div style="text-align:center">
        <form>
            <div>
               
                <label> Name:</label>
                 <input type="text" name="Name" size="40"/>
                
            </div>
            <div>
                <label style="left:27px"> Address:</label>
                
                <input type="text" name="Address" size="50" style="left:27px;"/>
                
            </div>
            <div>
                <label style="right: 46px;">City: </label>
                <input type="text" name="City" size="25" style="right:46px;"/>
                
            </div>
            <div>
                <label style="right:48px">State:</label>
                 <input type="text" name="State" size="25"/ style="right: 49px;">
                
            </div>
            <div>
               <label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
                
            </div>
            <div>
                
                <label style="bottom: 0px;" > Email:</label>
                 <input type="text" name="Email" size="40"/>
                
            </div>
            <div style="right: 180px; position: relative;" >
                <label>Subscribe to our mailing list?</label>
                
                <input type="radio" name="AddToList" value="yes" checked="checked" />Yes
                <input type="radio" name="AddToList" value="no" />No
                <br/>
                <br/>
            </div>
            <div class="text">
                <br>
                <br>
               <label style="top: 60px; left: 70px;"> Comments: </label>
                <textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px;  position: relative;"></textarea>
                <br/>
                <br/>
              
            </div >
            <div class="submit" style="right: 80px; position: relative;">
            <input type="submit" width="" />
            <input type="reset" />
        </div >
        </form>
    </div>

    <script src="test.js"></script>
</body>
</html>

Развернуть фрагмент

1. Это сработало очень хорошо, большое вам спасибо!!! Я обязательно выделю некоторое время для изучения этого кода, чтобы снова не столкнуться с этой проблемой. Я очень ценю помощь в этом!

Ответ №2:

Для центрирования попробуйте:

 margin: auto; 
justify-content: center;
text-align: center

Это должно выровнять все содержимое страницы, а также текст с равными полями.

Второй вариант:

 margin: auto;
width: 80%

Это займет всего 80% от общей ширины родительского элемента и будет автоматически центрировано, если это также не сработает, затем удалите margin: auto из второго варианта.

Ответ №3:

Для выравнивания по центру присвоите элементам, которые вы хотите выровнять, класс «center», а затем выберите класс в CSS. Примером является :

 .center {
  text-align: center;
}

 <div>
  Email: <input type="text" name="Email" size="40" class="center"/>
  <br/>
</div>

Развернуть фрагмент

РЕДАКТИРОВАТЬ: школы W3 — это то, где я нашел ответ.