html - 如何在 html/css 中将一组搜索栏居中？

Question

我正在尝试排列一些搜索栏和提交按钮，但我不知道该怎么做。我知道这可能真的很简单，但我是 HTML 的新手。 (哦，这只是浏览器的一部分，通常看起来不像这个那么糟糕 xD

.center-block{
    margin-top: 220px;
    text-align: center;
}
.searchboxes{
    width: 500px;
    opacity: 0.6;
    font-weight: bold;
    border-radius: 25px;
    text-align: center;
    margin: 0;
}
.searchboxes:hover{
    opacity: 1;
    font-weight: bold;
}
.clickboxes{
    opacity: 0.6;
    font-weight: bold;
    font-family: Arial;
    background-color: white;
    border-radius: 25px;
    margin-top: 480px;
    text-align: center;
    margin: 0;
}
.clickboxes:hover{
    opacity: 1;
    font-weight: bold;
}

<div class="col-md-6">
  <img class="center-block" src="/assets/logo.png" alt="MsearchLogo" style="width:480px;height:270px;">

      <form id="vb_yt_search-form" action="https://duckduckgo.com/" method="get" target="_blank">
    <input name="q" type="text" maxlength="128" class="searchboxes" />
    <input type="submit" value="DuckDuckGo" class="clickboxes" />
      </form>
      <br />
  <form id="vb_yt_search-form" action="http://www.google.com/search" method="get" target="_blank">
    <input name="q" type="text" maxlength="128" class="searchboxes" />
    <input type="submit" value="Google" class="clickboxes" />
  </form>
  <br />
<form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
    <input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" class="searchboxes" />
    <input type="submit" value="Youtube" class="clickboxes" />
 </a>
 </form>
 </div>

Answer 1

要使 HTML 和 CSS 居中，您的两个最简单的选择是:

• 带有 text-align: center 的全 Angular 容器
• 全宽容器，带有 display: block;margin: 0 auto;
的子元素

第一个给你一个容器，其中所有的 child 都将通过排版算法居中。这通常效果很好并且非常简单，但会集中所有子项，因此不适用于所有用例。

第二个为您提供一个子项，该子项将在其自己的行上 (display: block)，该子项将在其父项中居中，使用两侧的相等边距填充父项中的任何空白宽度(margin: 0 auto 给出零上/下边距和自动左/右边距)。

在您的示例代码中，您可以使用:

.col-md-6 {
  width: 100%;
  text-align: center;

将包含搜索框的行居中；但是，由于搜索按钮的宽度不同，所以整体效果有点差。你可以将每一行(搜索框+按钮)放在一个固定宽度的容器中，或者你可以给按钮一个足够大的固定宽度来容纳最大的按钮；或者您可以将按钮和搜索框放在不同的行上。