实现 CSS 垂直对齐扭曲宽度答案

【问题标题】：Materialize CSS vertical align distorting width实现 CSS 垂直对齐扭曲宽度
【发布时间】：2018-10-14 00:11:07
【问题描述】：

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

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

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

这是我正在做的事情的 sn-p 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，使其不会占用可能的最小宽度？

【问题讨论】：

标签： css vertical-alignment materialize

【解决方案1】：

您如何为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%;
}

【讨论】：

这太完美了！我尝试做所有事情，但似乎由于某种原因我错过了 100% 的行。无论如何，希望它的响应能力也可靠！

【解决方案2】：

这是因为 valign-wrapper 有 display: flex;财产。这意味着输入将占用所需的最小空间。

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

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

希望这会有所帮助:)

【讨论】：

在输入字段上试过，但现在不是垂直对齐