如何在不牺牲宽度的情况下将该容器内的内容居中答案

【问题标题】：How to center the contents inside this container without sacrificing width如何在不牺牲宽度的情况下将该容器内的内容居中
【发布时间】：2019-02-24 23:47:28
【问题描述】：

如何在不牺牲宽度的情况下使该容器内的内容居中。我可以减小宽度并做 margin: 0 auto 但这不是我想要的。

目前，表单看起来并不在中间，它看起来是左对齐。从第一个字符到图像的末尾，表单应该出现在页面的中心，这就是我想要做的。 https://jsfiddle.net/yj4zh297/

<!doctype html>
        <html lang="en">
          <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

            <title>Print Form</title>
            <style type="text/css">
              .line{
                border-bottom: 1px solid black;
              }
              .clear {
                clear: both;
              }
              .row {
                margin: 0;
              }

              .container-fluid div {
                margin-bottom: 3px;
              }
            </style>
          </head>
          <body>

            <div class="container-fluid" style="background: grey;">

                <div class="col-sm-6 float-right">
                  <!--.img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent elemen-->
                  <figure style="max-width: 200px; max-height: 200px;">
                    <img src="https://i.imgur.com/rC8Btb0.jpg" class="img-fluid"  alt="image">
                  </figure>
                </div>

                <div class="col-sm-6 float-left">
                    Form Number: <span class="line">21129012</span><br>

                </div>
                <div class="col-sm-12">
                    Hostel: <span class="line">(Yes / No)</span><br>
                </div>

              <div class="col-sm-12">
              Course Applying For: <span class="line"> BSC Informatics and robotics</span><br>
            </div>

            <div class="col-sm-12">
              Full Name (IN BLOCK LETTERS): <span class="line"> DLKLKDJ LKDJDKDJD</span><br>
            </div>

             <div class="col-sm-12">
              Gender: <span class="line"> Male</span><br>
            </div>

            <div class="col-sm-12">
              Phone Number: <span class="line"> 3838443322</span><br>
            </div>

                <div class="col-sm-12">
              Email: <span class="line"> 3838443322</span><br>
            </div>
         </div> <!--end of container-->
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
          </body>
        </html>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

可以设置宽度：100%；最大宽度：800px；到容器流体。并添加 margin-left:auto;边距右：自动；

【讨论】：