我刚开始学习HTML和CSS，google建议的修复方法都没有成功地将我的联系人框对齐到页面的中心。我尝试过将内容对齐、项目对齐、内容对齐和显示灵活性与上面的东西结合起来。我的页面要么保持不变，要么联系人框自动对齐到左上角。
我有很多麻烦的东西，我已经建立了html到目前为止，从来没有对齐中心。我只是想了解为什么会发生这种情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
3条答案
按热度按时间ktecyv1j1#
我猜你只是打错了：
它应该如下所示：
3mpgtkmj2#
你只需要把下面的css在css文件夹。当你开始写左上角是起点这就是为什么你的内容是去
html {文本对齐：居中}
arknldoa3#
请将“边距：35 px”带“填充：35 px”，并在contact-box类中使用以下4行将表单居中：
最高：50%;
左侧：50%;
位置：固定;
变换：平移（-50%，-50%）;
附上更正后的代码供大家参考，希望对大家有所帮助！