Кнопка отправки не центрирована

Question

Кнопка отправки не центрирована

0

У меня есть HTML-форма, и у меня есть все входы, за исключением кнопки отправки в таблице. Я сосредоточил все в таблице, кроме кнопки отправки, хотя я пробовал множество вещей, чтобы сосредоточить ее безрезультатно. Пожалуйста, помогите мне сосредоточить мою кнопку отправки под моим столом с другими входами!

Вот моя HTML-страница:

<html>
<head>
    <link rel="stylesheet" href="/Site.css">
    <?php include("Header.php"); ?>
    </div>
</head>

<body>
    <div id="main">
        <h1>About</h1>

        <form action="Insert.php" method="post">
            <table>
                <tr>
                    <td><span>First name:</span></td>
                    <td><input type="text" name="firstname"></td>
                </tr>
                <tr>
                    <td><span>Last name:</span></td>
                    <td><input type="text" name="lastname"></td>
                </tr>
                <tr>
                    <td><span>Age:</span></td>
                    <td><input type="number" name="age"></td>
                </tr>
            </table>

            <input type="submit">
        </form>

        <?php include("Footer.php");?>
    </div> 
</body>
</html>

И вот мой CSS:

body {
font-family: "Trebuchet MS", Verdana, sans-serif;
background-color: #4C875E;
color: #C9C9C9;
}

#main {
padding: 20px;
background-color: #1C404A;
border-radius: 0 4px 4px 4px;
}

h1 {
border-bottom: 3px solid #4C875E;
color: #4C875E;
}

#swag {
left: 0;
    line-height: 200px;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 0;
text-align: center;
color: #BABABA;
}

ul#menu {
padding: 0;
position: relative;
margin: 0;
}

ul#menu li {
display: inline;
}

ul#menu li a {
background-color: #1C404A;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #C9C9C9;
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
background-color: #e8eef4;
}

#bg {
background: url(assets/banner.jpg) no-repeat center center fixed;
background-size: 100% auto;
}

table {
margin: 0 auto;
}

kimbarcelona 14 апр. 2014, в 04:05

Источник

Теги:

php

html

css

web

design

5 ответов

0

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

 <tr>
    <td><input type="submit"></td>
 </tr>    
</table>

Рабочий пример

Jatin 13 апр. 2014, в 23:46

0

Насколько я знаю, нет точного способа сосредоточить вещи в CSS с помощью одной команды. Однако есть несколько способов, которыми вы можете это сделать вручную. Я бы сделал одну из двух вещей. Сначала (простите, если это кажется слишком простым), я мог бы просто добавить что-то вроде & nbsp; & nbsp; & nbsp; & nbsp; перед кнопкой отправки. Таким образом, это просто добавит перед ним некоторое пространство (и оно масштабируется довольно красиво, если пользователь увеличит масштаб).

Другая вещь, которую я бы сделал (и, вероятно, лучшее решение), заключалась бы в изменении ширины родительского div (так, чтобы он был достаточно широким, чтобы соответствовать форме), а затем получить такую ширину:

parseInt(getComputedStyle(document.getElementById('main')).width)

разделите его на два, чтобы получить центр, затем поместите кнопку в центр минус половину ширины кнопки:

parseInt(getComputedStyle(getElementById("mySubmitButtonId")).width)

Примечание: поместите его с помощью поля слева

JFakult 13 апр. 2014, в 23:21

0

LIVE DEMO

Вы должны поместить кнопку ввода внутри таблицы в новую строку
Используйте td colspan для объединения двух столбцов
Чтобы align="center" кнопку, используйте атрибут align="center".

Код

            <table>
                <tr>
                    <td><span>First name:</span></td>
                    <td><input type="text" name="firstname"/></td>
                </tr>
                <tr>
                    <td><span>Last name:</span></td>
                    <td><input type="text" name="lastname"/></td>
                </tr>
                <tr>
                    <td><span>Age:</span></td>
                    <td><input type="number" name="age"/></td>
                </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit"/></td>
              </tr>    
                </table>

CMPS 13 апр. 2014, в 22:55

0

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

    <center><input type="submit"></center>

Brandon Beggs 13 апр. 2014, в 22:51

Ещё вопросы

kimbarcelona · Accepted Answer · 2014-04-13T23-26-00.000Z

Попробуйте поместить его в свой стол:

 <table>
                <tr>
                    <td><span>First name:</span></td>
                    <td><input type="text" name="firstname"></td>
                </tr>
                <tr>
                    <td><span>Last name:</span></td>
                    <td><input type="text" name="lastname"></td>
                </tr>
                <tr>
                    <td><span>Age:</span></td>
                    <td><input type="number" name="age"></td>
                </tr>
                <tr>
                <td colspan='2'><center><input type="submit"></center></td>
                </tr>
            </table>

FIDDLE