Question

我正在尝试在页面中间垂直放置一个搜索栏，而在水平方向上放置一个搜索栏。

由于某些原因，当使用内置的valign-wrapper时，它会扭曲搜索栏的宽度。

为什么会这样？当我不添加valign-wrapper类时，宽度还可以，但是当我添加它时，宽度变得非常小。

这是我在做什么的摘要 https://jsfiddle.net/4khz9jgp/3/

<div class="section search-section">
  <div class="valign-wrapper">
      <div class="row">
          <div class="col l8 push-l2 m8 push-m2 s10 push-s1">
              <div class="input-field">
                  <input id="icon_prefix" type="text" class="validate" placeholder="type in what you are looking for...">
              </div>
          </div>
      </div>
   </div>
</div>

是否可以从输入字段的valign-wrapper覆盖flex，以使其不占用最小宽度？

Answer 1

您如何将width: 100%;部门的row做为

<div class="section search-section">
    <div class="valign-wrapper">
        <div id="thisOne" class="row">
            <div class="col l8 push-l2 m8 push-m2 s10 push-s1">
                <div class="input-field">
                    <input id="icon_prefix" type="text" class="validate" placeholder="type in what you are looking for...">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.search-section{
    min-height: 300px;
    height: 100%;
}
#thisOne{
    width:100%;
}

Answer 2

这是因为valign-wrapper具有display：flex;属性。这意味着输入将占用所需的最小空间。

也许您可以创建另一个类来使输入居中，例如：

.center {
 position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}

希望这会有所帮助：）

实现CSS垂直对齐扭曲宽度

2 个答案: