Question

这是代码。如何集中搜索表单？无论屏幕分辨率如何，此表格应始终位于屏幕的中心。我试过保证金：0自动;但它不起作用。

谢谢。

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

Answer 1

对齐文字

只需将text-align: center添加到form，它就会以所有屏幕尺寸为中心。

text-align：center

此属性描述块容器的内联级内容是如何对齐的。

form {
  text-align: center; /* Add */
}

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

Flexbox解决方案（现代）：

align-items：center

项目以横轴为中心

请注意，在我们使用flex-direction: column的示例中。否则只需使用justify-content: center flex-direction: row

.search-p {
  display: flex;
  flex-direction: column; /* Cross axis alignment; simply said vertical stacking/positioning */
  align-items: center; /* Center cross-axis */
}
.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

Answer 2

我喜欢使用新的Flexbox布局在中心放置一些内容，这里有一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/虽然它相当新，但它已经在大多数浏览器和大多数浏览器中得到支持它希望在明年左右成为新标准。

＆＃13;

/* added new code */
.search-p {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

＆＃13;

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

＆＃13;

Answer 3

CSS和表单验证彼此无关，一个是简单的样式 - 另一个是数据检查，由客户端由JS（没有服务器验证的坏主意）和/或服务器端处理（总是这样做）这个）所以没有问题。 （对评论作出反应）。

其他一些问题可能会浮出水面，因为text-align: center仅在元素为display: inline-block时才有效 - float: left; float: right; display: block;会破坏此中心。

我建议做的是添加一个包装器，通过margin: 0 auto方式将搜索集中在表单中 - 这是一种比text-align: center更加可靠的中心元素的方式，正如它所说的那样用于文本（甚至我也多次滥用这个属性）。

＆＃13;

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}

/* Added a selector here */
.search-form .search-form-field-wrap {
  display: block; /* optional - divs are block by default. */
  width: 80%; /* or anything else */
  margin: 0 auto; /* you're gonna want to use this for centering block elements */
}

.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}
form {
  text-align: center;
}

＆＃13;

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <!-- added a wrapper here -->
    <div class="search-form-field-wrap">
      <input type="text" placeholder="Enter" required>
      <button type="submit">Search</button>
    </div>
  </form>
</div>

＆＃13;

如何将元素居中（搜索表单）？

3 个答案: