Question

我写了关于php的联系表。我希望输入字段和文本输出居中。由于我是使用form标签创建输入字段的，因此我认为如果将居中的CSS标签插入form标签就足够了。但是，该位置将忽略CSS文件（页面上的所有其他设置都在CSS文件上方起作用）。可能是什么原因？

我已经尝试过.form，＃form和仅表单，但没有效果

CSS：

form { 
    width:300px;
    height:160px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-80px;
    margin-left:-150px;
    border:1px solid black;
}

HTML：

 <head>
   <link rel="stylesheet" href="css/style.css">
 </head>
 <form action="" method="post">
      <input type="text" name="betreff" placeholder="Betreff?"><br>
      <textarea name="nachricht" placeholder="Ihre Nachricht!"> 
      </textarea><br>
      <input type="submit" name="submit" value="Absenden!"><br>
 </form>

PHP：

<?php

if(isset($_POST['submit'])):
    $betreff = $_POST['betreff'];
    $nachricht = $_POST['nachricht'];
    $absenden = $db->prepare("INSERT INTO kontakt(betreff,nachricht,datum) VALUES (?,?,NOW())");
    $absenden->bind_param('ss',$betreff,$nachricht);
    $absenden->execute();
endif;

$abfrage = $db->query("SELECT * FROM kontakt ORDER BY datum DESC");

echo 'Es wurden '.$abfrage->num_rows.' Nachrichten gefunden!<br>';

while($ausgabe = $abfrage->fetch_object()){
    echo '<b>Betreff:</b> '.$ausgabe->betreff.' <br>
          <b>Nachricht:</b><br> '.$ausgabe->nachricht.' <br>
          <hr>';
}

实际上，我希望将联系表放在中间，但是如果他完全对CSS语句做出反应，我会感到很高兴。如前所述，仅保留联系表。其余的工作。

Answer 1

您仅有的定位信息是将表单定位在页面上。没有输入可正确继承的对齐信息。我建议在CSS文件中设置INPUT的样式，而不要依赖FORM样式来获得所需的内容。与FORM分开设置INPUT的样式也将在以后为您提供更多控制。

Answer 2

默认情况下，表单为inline，因此所有margin，width和height CSS都不会以您想要的方式影响它。您需要添加：

display:block;

到您的CSS。

另一件事是left:50%不能正确居中（我想这就是您使用margin更正的原因），建议使用margin: auto或{{ 1}}，margin-left:auto。这样，您将无需手动进行校正（请注意：这不会影响垂直对齐）。如果未设置适当的margin-right:auto / absolute定位相关性，则可能无法正常工作。

将事物居中的完全不同的方法是将它们放置在表中，并且将一个单元格的垂直和水平对齐设置为relative / center。您需要将middle元素html,body和width设置为height以及表格尺寸。这种方法有些变通，但是即使在较旧的浏览器上也可以正常使用。请注意，在这种情况下，100%必须保留form，因此，如果要使用这种方式，请不要添加inline。

php文件不接受css

2 个答案: