具体化CSS垂直对齐扭曲宽度 我试图把一个搜索杆垂直地放在一个页面中间，当然是水平的。

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

为什么会这样？ 当我不添加valign包装器类时，宽度是可以的，但是当我添加它时，宽度变得非常小

下面是我正在做的一个片段

---

是否有一种方法可以在输入字段上覆盖valign wrapper中的flex，使其不采用可能的最小宽度？

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

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

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

---

希望这有帮助：）

你把

宽度改成100%怎么样用于
行
div

<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>

在输入字段上尝试过，但现在它不是垂直的。这是完美的！我试着做每件事，但似乎出于某种原因，我错过了这场比赛的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>

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