Question

我正在研究https://rapptor.co。我使用Materialize作为框架，我正在制作一个登录模式，我试图将模式底部的按钮置于中心对齐的位置，但它不起作用。

    <!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Login Details</h4>

        <div class="row">
            <div class="input-field col s12">
                <i class="material-icons prefix">person</i>
                <input id="first_name" type="text" class="validate">
                <label for="first_name">Username/Email</label>
            </div>
            <div class="input-field col s12">
                <i class="material-icons prefix">security</i>
                <input id="first_name" type="password" class="validate">
                <label for="first_name">Password</label>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="row" style="margin-bottom: -30px;">
            <div class="col m4 s12">
                <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat red lighten3">Close</a>
            </div>
            <div class="col m4 s12">
                <a href="#!" class="modal-action waves-effect waves-orange btn-flat orange lighten-3">Help</a>
            </div>
            <div class="col m4 s12">
                <a href="#!" class="modal-action waves-effect waves-green btn-flat green lighten-3">Login</a>
            </div>
        </div>          
    </div>
</div>

有人可以为我提出任何建议吗？

谢谢！

Answer 1

删除float:right;并在第7行

处插入尝试跟随css

.row .col.m4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
    text-align: center;
}

Answer 2

像这样改变你的模态页脚，只需运行这个片段就可以看出差异，希望这会对你有所帮助

.modal-footer {
	text-align:center;
}
.modal-footer a {
	display:inline-block;
	margin:0 15px;
	float:none; /*if you set float already */
}

<div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat red lighten3">Close</a>
    <a href="#!" class="modal-action waves-effect waves-orange btn-flat orange lighten-3">Help</a>
    <a href="#!" class="modal-action waves-effect waves-green btn-flat green lighten-3">Login</a> 
</div>

如果你设置了这个按钮就像这张图片一样显示

我不知道这就是你需要的，这就是为什么我把图像放在这里

物化中心按钮Horozontally在网格上

2 个答案: