Кнопки отправки формы в центре HTML/CSS

У меня проблемы с центрированием кнопок отправки HTML-формы в CSS.

Прямо сейчас я использую:

    <input value="Search" title="Search" type="submit" id="btn_s">
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">

с этим содержимым CSS

#btn_s{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

#btn_i {
    width: 125px;
    margin-left: auto;
    margin-right: auto;
}

И ничего не делает. Я знаю, что я, вероятно, делаю что-то глупое неправильно. Как я могу это исправить?


html alignment css center
person Belgin Fish    schedule 19.11.2010    source источник

Ответы (8)


arrow_upward
128
arrow_downward

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

я просто обернул вокруг них div и выровнял по центру. тогда вам не нужны никакие css на кнопках, чтобы центрировать их.

<div class="buttonHolder">
  <input value="Search" title="Search" type="submit" id="btn_s"> 
  <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>

.buttonHolder{ text-align: center; }
person Sebastian Patane Masuelli    schedule 19.11.2010
comment
на самом деле, недостатком этого решения является то, что держатель div центрирует в нем все, включая текст, дочерние элементы и дочерние элементы дочерних элементов... поэтому обычно лучше использовать 'margin: 0 auto' для отдельных элементов, когда мы не хотим, чтобы весь контейнер был центрирован, и, как уже говорилось, вы можете добиться этого с помощью блочных элементов. Тем не менее, иногда я использую такое центрирование, так что от меня -0, так как вы не ошиблись... - person ; 27.04.2014
comment
Отлично работает для меня, когда я использовал его для ссылки кнопки в стиле CSS. Оберните ‹a href› с div и классом, и он должен работать отлично, не затрагивая разные классы. - person masmrdrr; 18.06.2015

arrow_upward
32
arrow_downward

Элементы ввода встроены по умолчанию. Добавьте display:block, чтобы применить поля. Однако это разобьет кнопки на две отдельные строки. Используйте обертку <div> с text-align: center, как предложили другие, чтобы поместить их в одну строку.

person Tom    schedule 19.11.2010
comment
Что мне действительно нравится в этом ответе, так это то, что он объясняет, почему проблема возникла в первую очередь. - person Chris Walker; 21.03.2021

arrow_upward
17
arrow_downward

Я вижу здесь несколько ответов, большинство из которых сложны или имеют некоторые недостатки (дополнительные div, выравнивание текста не работает из-за display: inline-block). Я думаю, что это самое простое и беспроблемное решение:

HTML:

<table>
    <!-- Rows -->
    <tr>
        <td>E-MAIL</td>
        <td><input name="email" type="email" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="Register!" /></td>
    </tr>
</table>

CSS:

table input[type="submit"] {
    display: block;
    margin: 0 auto;
}
person Adrian Adamczyk    schedule 19.04.2017
comment
Абсолютно согласен с вами, это лучшее решение, спасибо! +1 - person stepik21; 12.08.2017

arrow_upward
8
arrow_downward

Попробуй это :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <style type="text/css">
        #btn_s{
            width:100px;
        }

        #btn_i {
            width:125px;
        }
        #formbox {
            width:400px;
            margin:auto 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <form method="post" action="">
        <div id="formbox">
            <input value="Search" title="Search" type="submit" id="btn_s"> 
            <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
        </div>
    </form>
</body>

У этого есть 2 примера, вы можете использовать тот, который лучше всего подходит для вашей ситуации.

  • используйте text-align:center в родительском контейнере или создайте для этого контейнер.
  • если контейнер должен иметь фиксированный размер, используйте auto левое и правое поля, чтобы центрировать его в родительском контейнере.

обратите внимание, что auto используется с отдельными блоками, чтобы центрировать их в родительском пространстве, распределяя пустое пространство слева и справа.

person SuperDuck    schedule 19.11.2010

arrow_upward
1
arrow_downward 

<style>
form div {
    width: 400px;   
    border: 1px solid black;
} 

form input[type='submit']  {
    display: inline-block;
    width: 70px;
}

div.submitWrapper  {
   text-align: center;    
}    
</style>
<form>

<div class='submitWrapper'>    
<input type='submit' name='submit' value='Submit'> 
 </div>

Также проверьте этот jsfiddle

person kta    schedule 17.02.2014
comment
Вам также необходимо установить поле на кнопке. поле: 0 авто; - person Gawie Greef; 22.06.2018

arrow_upward
1
arrow_downward

Я предполагаю, что кнопки должны быть рядом друг с другом в одной строке, каждая из них не должна быть центрирована с использованием поля «авто», а должна быть помещена внутри div с определенной шириной, которая имеет поле «0 авто». :

CSS:

#centerbuttons{
   width:250px; 
   margin:0 auto;
}

HTML (после удаления свойств поля из CSS ваших кнопок):

<div id="centerbuttons">
     <input value="Search" title="Search" type="submit"> 
     <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
person Annie    schedule 19.11.2010

arrow_upward
0
arrow_downward

Одно простое решение, если нужно центрировать только одну кнопку, выглядит примерно так:

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

Вы можете использовать аналогичный стиль для обработки несколько кнопок.

person Nagev    schedule 14.03.2019
comment
Ммм, плохая практика использования встроенного JavaScript. - person IamBatman; 28.11.2020
comment
Спасибо за отзыв, я использовал это для внутреннего инструмента, а не для производства, и мне просто нужно было быстрое решение. В основном программировал на C и Python в то время. Пожалуйста, удалите ответ, я нажимаю «удалить», но ничего не происходит... - person Nagev; 28.11.2020
comment
Я думаю, что помню, почему я выбрал это, временный внутренний инструмент, который я написал, использовал python CGI для написания динамического HTML, поэтому требование было по существу как можно короче в одну строку. - person Nagev; 28.11.2020

arrow_upward

arrow_downward

person    schedule
comment
Гах... display: block... всегда забывай об этом! - person charles-allen; 04.02.2020