HTML/CSS无法对齐内容中心

rqdpfwrv  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(126)

我刚开始学习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;
}
ktecyv1j

ktecyv1j1#

我猜你只是打错了:

transform: translate(-50%.-50%);

它应该如下所示:

transform: translate(-50%,-50%);
3mpgtkmj

3mpgtkmj2#

你只需要把下面的css在css文件夹。当你开始写左上角是起点这就是为什么你的内容是去
html {文本对齐:居中}

arknldoa

arknldoa3#

请将“边距:35 px”带“填充:35 px”,并在contact-box类中使用以下4行将表单居中:
最高:50%;
左侧:50%;
位置:固定;
变换:平移(-50%,-50%);
附上更正后的代码供大家参考,希望对大家有所帮助!

<!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>
    <style>
        *{
    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%;
    position: fixed;
    transform: translate(-50%, -50%);
}

form{
    padding: 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;
}
    </style>
  </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>

相关问题