我已经写了一份关于 php 的联系表。我希望输入字段和文本输出居中。由于我使用 form 标签创建了输入字段，我认为如果我使用 form 标签在 CSS 文件中插入居中就足够了。但是，该位置会忽略 CSS 文件(页面上的所有其他设置均在 CSS 文件之上工作)。可能是什么原因？
我已经尝试过.form、#form和only 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 声明使用react我会很高兴。 如前所述，只省略了联系表格。其余的工作。
最佳答案
Form默认是inline，所以所有的margin, width and height css都不会影响随心所欲。您需要添加:
显示: block ；
到您的 CSS。
另一件事是 left:50% 不会正确居中(我想这就是为什么你使用了 margin 校正)，建议使用margin: auto，或者margin-left:auto, margin-right:auto。这样您就不需要手动更正它(注意:这不会影响垂直对齐)。如果不设置正确的 absolute/relative 定位相关性，它可能无法工作。
完全不同的居中方式是将它们放入表格中，其中一个单元格的垂直和水平对齐设置为 center/middle。您需要将 html,body 元素的 width 和 height 设置为 100% 以及表格尺寸。这种方法有点变通，但即使在旧版浏览器上也能完美运行。请注意，在那种情况下，form 必须保持 inline，所以如果您要使用那种方式，请不要添加 display:block。
关于php 文件不接受 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54408573/