Question

美好的一天，问我如何将我的条款和条件中的文本放在模式弹出窗口的中央。添加模式CSS尝试使其居中似乎不起作用。感谢任何可以提供帮助的人。

HTML：

<div class="modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="container spacer text-align-justify">
            <div class="row">
              <div class="col-md-12 col-xs-12 spacer"><br><br></div> <!--spacer-->

              <div class="col-md-12" style="width: 700px;">
                <div class="col-md-12 text-align-center">
                  <h2 class="bold_font">GENERAL TERMS AND CONDITIONS</h2>
                  <br><br><br><br>
                </div>..................................................

...................................条款和条件内容

CSS：

.modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -150px;
}

screenshot

Answer 1

您可以在模态框类中添加变换：translate(-50%, -50%); with left: 50%; top:50%;

.modal {
        width: 300px;
        height: 300px;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        position: absolute;
       }

Answer 2

您的CSS，

.modal {
        width: 300px;
        height: 300px;
        margin-top: 100px; #add according to your requirement
        margin-left: auto;
        margin-right: auto;
        padding: 10px; # add if you want
       }

调整模态条款和条件

2 个答案: