Центральная форма отправки кнопок 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;
}

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

Ответы

Ответ 1

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; }

Ответ 2

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

Ответ 3

Я вижу здесь несколько ответов, большинство из которых сложны или с некоторыми минусами (дополнительные divs, text-align не работают из-за отображения: 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;
}

Ответ 4

Попробуйте следующее:

<!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 используется с отдельными блоками, чтобы центрировать их в родительском пространстве, распределяя пустое пространство влево и вправо.

Ответ 5

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

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>

Ответ 6

<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

Ответ 7

Одно простое решение, если нужно центрировать только одну кнопку, это что-то вроде:

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

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

Ответ 8

/* here is what works for me - set up as a class */

.button {
    text-align: center;
    display: block;
    margin: 0 auto;
}

/* you can set padding and width to whatever works best */