Question

我想在UI Kit网格中垂直居中输入，按钮居中，但不是输入，我可以看到两者都显示内联块。

<div class="uk-grid">   
    <div class="uk-width-1-2" >
        <input style="height: 50px" placeholder="email" name="Password" id="password-connexion" type="text" />
    </div>
    <div class="uk-width-1-2 connexion-bar-item">
        <button class="uk-button" name="submit">CONNEXION</button>
    </div>
</div>

感谢

Answer 1

如果您的div是特定大小，您可以将div中的行高设置为与div高度相同：

<div class="uk-width-1-2" style="height: 200px; line-height: 200px;">
    <input style="height: 50px" placeholder="email" name="Password" id="password-connexion" type="text" />
</div>

或者如果您的div大小未知，请使用填充和变换将其移动到中心：

<div class="uk-width-1-2" style="position: relative;">
    <input style="height: 50px; position: absolute; top: 50%; transform: translateY(-50%);" placeholder="email" name="Password" id="password-connexion" type="text" />
</div>

UI工具包如何在英国网格中垂直居中输入

1 个答案: