html - 使用 CSS 在类中居中对齐内容？

Question

您好开发者社区。

我对使用 CSS 还很陌生，目前当我在我的 CSS 中将我的类 .form-search 的宽度增加到 105% 时，这会将搜索栏向右移动，我想将搜索栏保留在center 无论我做什么宽度大小 %，我在 CSS 中做些什么来保持它在中心而不考虑宽度大小？

My current CSS code is below:

    @media (max-width: 600px)
    .form-search {
        width: 108%;
        position: relative;
        float: right;
        margin: 0;
    }

下面是我的 HTML。

<form method="GET" action="/search/" role="search" class="form-search">
  <div class="input-group">
    <label for="q" class="sr-only">
      Type to search the test services online
    </label>
    <input type="text" class="form-control" id="q" name="q" placeholder="Type to test Services Online" value="" title="Type to test Services Online">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-default" title="Search" aria-label="Search">
        <span class="fa fa-search" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</form>

Answer 1

is there something I do in CSS to keep it in center regardless of the width size?

是的。 CSS 中的两个声明(使用 flexbox):

.form-search {
  display: flex;
  justify-content: center;
}

这将确保 .form-search 的子项保持在 .form-search 的中心，无论它们自己的宽度如何，也无论 的宽度如何>.表单搜索.