html - 如何使这个表格居中 - HTML/Bootstrap

Question

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="myModalLabel">Meer over <?php echo $user['roepnaam']; ?></h4>
                    </div>
                <div class="modal-body">

                    <img src="images/userimg.png" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
                    <h3 class="media-heading"><?php echo $user['roepnaam']; ?> <?php echo $user['naam']; ?><small> <?php echo $user['stad']; ?></small></h3>

                    <p class="text-left"><strong>Gegevens:</strong><br>
            <div class="panel-body">
              <div class="row">
                <div align="center" class=" col-md-8 col-lg-8 ">
                  <table class="table table-user-information">
                    <tbody>
                      <tr>
                        <td class="text-left">Roepnaam:</td>
                        <td class="text-left"><?php echo $user['roepnaam']; ?></td>
                      </tr>
                      <tr>
                        <td class="text-left">Naam:</td>
                        <td class="text-left"><?php echo $user['naam']; ?></td>
                      </tr>
                      <tr>
                        <td class="text-left">Gebruikersnaam:</td>
                        <td class="text-left"><?php echo $user['username']; ?></td>
                      </tr>
                      <tr>
                        <td class="text-left">Woonplaats:</td>
                        <td class="text-left"><?php echo $user['stad']; ?></td>
                      </tr>
                        <tr>
                        <td class="text-left">Adres:</td>
                        <td class="text-left"><?php echo $user['adres1']; ?><br><br><?php echo $user['adres2']; ?></td>
                      </tr>
                      <tr>
                        <td class="text-left">Provincie:</td>
                        <td class="text-left"><?php echo $user['provincie']; ?></td>
                      </tr>
                      <tr>
                        <td class="text-left">Email:</td>
                        <td class="text-left"><?php echo $user['email']; ?></td>
                      </tr>
                    </tbody>
                  </table>

                </div>
              </div>
            </div>
          </p>
        </div>
                <div class="modal-footer">
                    <center>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Sluit</button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>

如何让我的 table 居中？我什么都试过了margin: 0 auto;并给表或 id 一个类。试过<center>标签，但我不应该使用那个标签。也试过align: center ;这些都不起作用，但我真的需要将它居中。

Answer 1

一种方法是。

从你有表格 div 的地方，即

<div align="center" class=" col-md-8 col-lg-8 ">
      <table class="table table-user-information">
       <tbody>
          <tr>
           <td class="text-left">Roepnaam:</td>
           <td class="text-left"><?php echo $user['roepnaam']; ?></td>
          </tr>
          <tr>
            <td class="text-left">Naam:</td>
            <td class="text-left"><?php echo $user['naam']; ?></td>
          </tr>
          <tr>
            <td class="text-left">Gebruikersnaam:</td>
            <td class="text-left"><?php echo $user['username']; ?></td>
           </tr>
           <tr>
             <td class="text-left">Woonplaats:</td>
             <td class="text-left"><?php echo $user['stad']; ?></td>
           </tr>
           <tr>
              <td class="text-left">Adres:</td>
              <td class="text-left"><?php echo $user['adres1']; ?><br><br><?php echo $user['adres2']; ?></td>
          </tr>
             <tr>
               <td class="text-left">Provincie:</td>
               <td class="text-left"><?php echo $user['provincie']; ?></td>
             </tr>
             <tr>
                <td class="text-left">Email:</td>
                <td class="text-left"><?php echo $user['email']; ?></td>
               </tr>
      </tbody>
</table>

</div>

在外面添加两个div，所以那部分现在看起来像这样

 <div style="width:100%">
        <div style="width:250px; margin:0 auto;">


            <div align="center" class=" col-md-8 col-lg-8 ">
              <table class="table table-user-information">
                <tbody>
                  <tr>
                    <td class="text-left">Roepnaam:</td>
                    <td class="text-left">ewe</td>
                  </tr>
                  <tr>
                    <td class="text-left">Naam:</td>
                    <td class="text-left">ewe</td>
                  </tr>
                  <tr>
                    <td class="text-left">Gebruikersnaam:</td>
                    <td class="text-left">wewe</td>
                  </tr>
                  <tr>
                    <td class="text-left">Woonplaats:</td>
                    <td class="text-left">ewe</td>
                  </tr>
                    <tr>
                    <td class="text-left">Adres:</td>
                    <td class="text-left">wewe</td>
                  </tr>
                  <tr>
                    <td class="text-left">Provincie:</td>
                    <td class="text-left">wewe</td>
                  </tr>
                  <tr>
                    <td class="text-left">Email:</td>
                    <td class="text-left">ewe</td>
                  </tr>
                </tbody>
              </table>
              </div>
            </div>

     </div>

尝试使div的内部宽度<div style="width:250px; margin:0 auto;">低于 div 的外部宽度 <div style="width:100%">根据您的需要；

希望对你有帮助