центральные кнопки отправки формы html / css - PullRequest
Новая
       14

центральные кнопки отправки формы html / css

64 голосов
/ 19 ноября 2010

У меня проблемы с центрированием кнопок отправки 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;
}

и он ничего не делает, я знаю, что, возможно, я делаю что-то глупое неправильно, кто-нибудь может мне помочь?

Спасибо

Ответы [ 8 ]

119 голосов
/ 19 ноября 2010

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; }
29 голосов
/ 19 ноября 2010

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

12 голосов
/ 19 апреля 2017

Здесь я вижу несколько ответов, большинство из которых сложные или с некоторыми минусами (дополнительные 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;
}
6 голосов
/ 19 ноября 2010

Попробуйте: 

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

1 голос
/ 18 февраля 2014 
<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

1 голос
/ 19 ноября 2010

Я предполагаю, что кнопки должны быть расположены рядом друг с другом на одной и той же линии, каждая из них не должна центрироваться с помощью поля '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>
0 голосов
/ 25 июня 2019 
/* 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 */
0 голосов
/ 14 марта 2019

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

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

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

...