Html Can'；看来我的位置不对。CSS_Html_Css

Html Can'；看来我的位置不对。CSS

html css

Html Can'；看来我的位置不对。CSS,html,css,Html,Css,我正在做一个投资组合网站作为我的第一个编程项目，我在定位上遇到了一些问题。我有两个元素在顶部，我想在中间，但有一点离开，我也有我的网页分为两列，但第二个并没有真正完全排成一行，无论出于何种原因更具体地说，顶部有一个箭头，应该位于页面的中心（水平方向），带有边框的文本“主页”也应该居中在右栏中，“联系人表单”的标题与联系人表单的左侧不对齐，提交按钮也不对齐另外，如何使表单中输入字段的边框在选中时不改变颜色谢谢，非常感谢我的HTML（它实际上是一个PHP文件，因为它有一个联系人表单，但大

我正在做一个投资组合网站作为我的第一个编程项目，我在定位上遇到了一些问题。我有两个元素在顶部，我想在中间，但有一点离开，我也有我的网页分为两列，但第二个并没有真正完全排成一行，无论出于何种原因

更具体地说，顶部有一个箭头，应该位于页面的中心（水平方向），带有边框的文本“主页”也应该居中

在右栏中，“联系人表单”的标题与联系人表单的左侧不对齐，提交按钮也不对齐

另外，如何使表单中输入字段的边框在选中时不改变颜色

谢谢，非常感谢

我的HTML（它实际上是一个PHP文件，因为它有一个联系人表单，但大部分是HTML）：

您要做的第一件事是将按钮从

display:inline block

更改为

display:block

。而不是给它<代码>余量：50% < /代码>，你要给它<代码>空白0自动< /代码>自动对齐中间，并设置固定的<代码>宽度<代码>：

.homepage {
  display: block;
  width: 100px;
  margin: 0 auto;
}

至于您的

.back\u按钮

，它将需要类似的规则：

.fa.back_button {
  display: block !important;
  margin: 15px auto 10px;
}

请注意，选择器已更改为

.fa。后退按钮

。这是为了增加其特殊性，并覆盖稍微更具体的规则。额外的边距只是返回到它作为

内联块

元素的显示方式

使您的

联系人表单

标题和提交按钮对齐的最简单方法是偏移Boostrap添加的

列

类。这可以通过简单地为他们提供

行

类来实现，该类添加了相关的负边距：

<h3 class="row">Contact Form</h3>
 ...
<div class="row">
  <button class="btn-default btn rbutton" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</div>

只需覆盖这些规则即可解决问题：

.form-control:focus {
  border-color: white;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

这些都可以在

中看到。您要做的第一件事是将按钮从

显示：内联块

更改为

显示：块

。而不是给它<代码>余量：50% < /代码>，你要给它<代码>空白0自动< /代码>自动对齐中间，并设置固定的<代码>宽度<代码>：

.homepage {
  display: block;
  width: 100px;
  margin: 0 auto;
}

至于您的

.back\u按钮

，它将需要类似的规则：

.fa.back_button {
  display: block !important;
  margin: 15px auto 10px;
}

请注意，选择器已更改为

.fa。后退按钮

。这是为了增加其特殊性，并覆盖稍微更具体的规则。额外的边距只是返回到它作为

内联块

元素的显示方式

使您的

联系人表单

标题和提交按钮对齐的最简单方法是偏移Boostrap添加的

列

类。这可以通过简单地为他们提供

行

类来实现，该类添加了相关的负边距：

<h3 class="row">Contact Form</h3>
 ...
<div class="row">
  <button class="btn-default btn rbutton" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</div>

只需覆盖这些规则即可解决问题：

.form-control:focus {
  border-color: white;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

这一切都可以在

中看到，稍微玩一下，我删除了除一个问题元素之外的所有元素，剩下的html基本上只有以下内容：

<body>
    <p class="homepage">Home Page</p>
</body>

<div class="row">
  <div class="text-center">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
  </div>
</div>
<div class="row">
  <div class="text-center">
        <p class="homepage">Home Page</p>
  </div>
</div>

这不是将文本居中的好方法，因为您已经使边距占据了100%的宽度。它将开始将文本绘制到左边的右边，这意味着正好在页面的中间，并一直向右画，使其偏离中心。< /P> 也许还有另一种方法可以让它居中。也许把它换成另一排，让bootstrap来处理？这意味着去掉CSS中的.back按钮和.homepage上的左边距和右边距，并将其用于html中的那些元素：

<body>
    <p class="homepage">Home Page</p>
</body>

<div class="row">
  <div class="text-center">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
  </div>
</div>
<div class="row">
  <div class="text-center">
        <p class="homepage">Home Page</p>
  </div>
</div>


主页

您应该能够通过类似的故障排除来找到解决其他对齐问题的方法（在我打字的时间里，似乎至少有一个其他答案，呵呵）。

玩了一会儿，我删除了除一个问题元素之外的所有元素，剩下的html几乎只有一个：

<body>
    <p class="homepage">Home Page</p>
</body>

<div class="row">
  <div class="text-center">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
  </div>
</div>
<div class="row">
  <div class="text-center">
        <p class="homepage">Home Page</p>
  </div>
</div>

<body>
    <p class="homepage">Home Page</p>
</body>

<div class="row">
  <div class="text-center">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
  </div>
</div>
<div class="row">
  <div class="text-center">
        <p class="homepage">Home Page</p>
  </div>
</div>


主页

您应该能够通过类似的故障排除来找到解决其他对齐问题的方法（在我打字时，似乎至少有一个其他答案，呵呵）