如何在 Bootstrap 3 模态框中居中输入框?

10

我目前正在从 Bootstrap 2 切换到 Bootstrap 3。在 Bootstrap 3 中如何将输入框居中显示?文本已正确居中显示。在 Bootstrap 2 中它是正常工作的。我尝试将 "style='text-align:center' " 移动到 div 中,但仍然没有成功。

JSfiddle

更新的 fiddle 网页包含答案

    <div id="Email_Alert_Modal" class="modal show" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header" style="text-align: center">
               <h3>Email Alert</h3>
            </div>

            <div class="modal-body"  style="text-align: center">
                    <h4>Please enter email address that the alert will be sent to.</h4>
                    <label  for="send_email"> </label> <input style="width:200px" type="email"  class="form-control" name="email" id="send_email" placeholder="johndoe@yahoo.com"  title="Input Email Address">
            </div>

            <div class="modal-footer">
              <button class="btn btn btn-primary" onclick='Email_Alert()' >Send</button>
              <button class="btn btn btn" data-dismiss="modal" >Cancel</button>
            </div>
        </div>
    </div>
</div>

也许尝试在 div 上使用内联样式而不是按钮。 - Blynn
1
这个问题受到了很多关注,虽然并不是同样的问题,但得到了相关的回答:https://dev59.com/mWox5IYBdhLWcg3wekIr - Oded Ben Dov
1个回答

13

设置

margin: 0 auto;

用于输入元素的标签


是的 - 还要不要忘记在宽度后面加上分号! - itamar
唉!你度假一周就忘记这种愚蠢的事情了。谢谢你提醒我 :) 我放了一个新的小提琴,里面有答案。再次感谢。 - fat fantasma

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接