html - 如何在模态中使一行居中？

Question

我正在使用引导程序 3，我无法将项目居中，我在这里插入了我的代码，但它看起来不像网站。

$('#modall').modal('show');

  .fr-popup-btn-margin-left{
  margin-left:1.7vw !important;
}
.fr-title-popup-margin{
  margin-top:20px;
}
.fr-popup-btns{
  text-align:center;
}
.fr-popup-title{
  font-size:24px;
  font-family: 'Montserrat', sans-serif;
  color: #008cc0;
  font-weight: 800;
  text-align: center;
}
.modal-fr-btn{
    border-radius: 40px;
    height: 25px;
    width: 80px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-weight: 800;
    padding: 0;
}
.dont{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size:10px;
}

.first-row-popup {
  padding: 0 !important;
  margin-top:0px;
  margin-right:0px;
  margin-left:0px;
  margin-bottom:10px;

}
@media (min-width: 992px){
    .pop2{
        width:25vw;
    }
        .pop1{
          width:30%;
    }
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script>
  
  <div class="modal fade" id="modall" role="dialog">
    <div class="modal-dialog pop2 modal-md">

        <!-- Modal content-->
        <div class="modal-content">
            <button type="button" class="close close-fr-popup" data-dismiss="modal">&times;</button>
            <div class="fr-popup-title">
                <div class="modal-title">
                </div>
            </div>
            <div class="modal-body">

                <div class="row nopadding">

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                </div>


                <div class="row nopadding">

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

请注意在网站上，标志不在模态框的中间，它们稍微向左。我不想添加填充或边距。

除了我上面尝试的之外，我还尝试text-center了 row and text-align: centerand margin: 0 auto。没有任何效果，似乎有些东西向左侧添加了比右侧更多的填充。

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

Answer 1

您可以申请的最简单的修复方法：

.flag-col > .row {
  display: flex;
  justify-content: center;
}

$('#modall').modal('show');

.fr-popup-btn-margin-left{
  margin-left:1.7vw !important;
}
.fr-title-popup-margin{
  margin-top:20px;
}
.fr-popup-btns{
  text-align:center;
}
.fr-popup-title{
  font-size:24px;
  font-family: 'Montserrat', sans-serif;
  color: #008cc0;
  font-weight: 800;
  text-align: center;
}
.modal-fr-btn{
    border-radius: 40px;
    height: 25px;
    width: 80px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-weight: 800;
    padding: 0;
}
.dont{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size:10px;
}

.first-row-popup {
  padding: 0 !important;
  margin-top:0px;
  margin-right:0px;
  margin-left:0px;
  margin-bottom:10px;

}
@media (min-width: 992px){
    .pop2{
        width:25vw;
    }
        .pop1{
          width:30%;
    }
}
.flag-col > .row {
    display: flex;
    justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script>
  
  <div class="modal fade" id="modall" role="dialog">
    <div class="modal-dialog pop2 modal-md">

        <!-- Modal content-->
        <div class="modal-content">
            <button type="button" class="close close-fr-popup" data-dismiss="modal">&times;</button>
            <div class="fr-popup-title">
                <div class="modal-title">
                </div>
            </div>
            <div class="modal-body">

                <div class="row nopadding">

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                </div>


                <div class="row nopadding">

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>

                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                    <div class="col-xs-3 text-center flag-col">
                        <div class="row nopadding">
                            <a class="close-fr-popup" href="">
                                <img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
                                    width="54">
                            </a>
                        </div>
                        <div class="row nopadding">
                            <a class="dont close-fr-popup col-xs-6" href="">English</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>