Question

我有这个登录表单，我想中心对齐按钮，但我似乎无法完美地对齐它。中心对齐的最佳方法是什么？

<form class="col s12">
    <div class="row">
        <div class="input-field col s10 offset-s1">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">Username</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s10 offset-s1">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
        </div>
    </div>
    <div class="row">
        <div class="col s6 offset-s4">
            <button class="btn waves-effect waves-light" type="submit" name="action">
                Submit
                <i class="material-icons right">send</i>
            </button>
        </div>
    </div>
</form>

请帮忙。谢谢！

Answer 1

让您的div包含与表单输入相同宽度的按钮，然后只需添加center-align类：

<form class="col s12">
    <div class="row">
        <div class="input-field col s10 offset-s1">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">Username</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s10 offset-s1">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
        </div>
    </div>
    <div class="row">
        <!-- CHANGED THE DIV BELOW (Changed size to col s10 offset-s1 
        to match the divs above and added center-align -->
        <div class="col s10 offset-s1 center-align">
            <button class="btn waves-effect waves-light" type="submit" name="action">
                Submit
                <i class="material-icons right">send</i>
            </button>
        </div>
    </div>
</form>

Answer 2

尝试将属性text-align: center;添加到按钮容器中。

为此，我添加了一个类，并将css包含在下面的代码中。

<style>
    .center-text {
        text-align: center;
    }
</style>

<form class="col s12">
    <div class="row">
        <div class="input-field col s10 offset-s1">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">Username</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s10 offset-s1">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
        </div>
    </div>
    <div class="row">
        <div class="col s6 offset-s4 center-text">
            <button class="btn waves-effect waves-light" type="submit" name="action">
                Submit
                <i class="material-icons right">send</i>
            </button>
        </div>
    </div>
</form>

如何将对齐按钮与图标实现css？

2 个答案: