html - 容器流体中的中心容器

Question

我想将一个容器置于容器流体的中心，但我无法让它工作

/* Setup Buttons Sepcific Styling */
.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid setup-bg my-auto">
        <div class="container my-auto">
            <h3 class="h3 white my-5 text-center justify-content-center">
                A simple tool for you to create your own social share bar.
                <br> Click the social media icons to add them to your bar</h3>
            <div class="row button-row justify-content-center">
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
                        <input type="checkbox" name="facebook" value="facebook">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
                        <input type="checkbox" name="linkedin" value="linkedin">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
                        <input type="checkbox" name="twitter" value="twitter">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
                        <input type="checkbox" name="pocket" value="pocket">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
                        <input type="checkbox" name="copy" value="copy">
                    </label>
                </div>
            </div>
            <div class="row text-center my-5">
                <div class="col-12">
                    <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
                </div>
            </div>
        </div>
    </div>

在代码片段上方，如何在容器流体中将带有按钮的文本居中？

Answer 1

依赖flexbox因为它是 Bootstrap 的 V4。只需将 d-flex flex-column 添加到 container-fluid。

我还删除了一些无用的类并更正了其中的一些(V4 中不再有 col-xs-*)

/* Setup Buttons Sepcific Styling */

.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid setup-bg d-flex flex-column">
  <div class="container my-auto">
    <h3 class="h3 white my-5 text-center">
      A simple tool for you to create your own social share bar.
      <br> Click the social media icons to add them to your bar</h3>
    <div class="row button-row justify-content-center text-center">
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
                        <input type="checkbox" name="facebook" value="facebook">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
                        <input type="checkbox" name="linkedin" value="linkedin">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
                        <input type="checkbox" name="twitter" value="twitter">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
                        <input type="checkbox" name="pocket" value="pocket">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
                        <input type="checkbox" name="copy" value="copy">
                    </label>
      </div>
    </div>
    <div class="row text-center my-5">
      <div class="col-12">
        <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
      </div>
    </div>
  </div>
</div>