Materialise CSS 垂直对齐扭曲宽度

Question

我正在尝试在页面中间垂直和当然水平地制作一个搜索栏。

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

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

这是我正在做的事情的片段 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

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

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

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

希望对您有所帮助:)

Answer 2

你为 row div 制作 width: 100%; 怎么样？

<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%;
}

Materialise CSS 垂直对齐扭曲宽度

Materialize CSS vertical align distorting width

css

vertical-alignment

materialize