Question

如何垂直对齐整个容器或包装纸？

（加宽视图，因此不能完全看到它）

<div class="content-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
            <a href="/edit" class="no-decoration">
            </a><a href="/edit" class="no-decoration">
            <div class="inforide">
              <div class="row">
                <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="center">
                    <div class="setting-awesome-font">
                      <i class="fas fa-user fa-1x"></i><br>
                    </div>
                    <div class="setting-text">
                      <h5>Account</h5>
                      <p>Manage your account login details</p><p>
                    </p></div>
                  </div>
                </div>
              </div>
            </div>
          </a></div><a href="/edit" class="no-decoration">
        </a>

          <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
            <div class="inforide">
              <div class="row">
                <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="center">
                    <div class="setting-awesome-font">
                      <i class="fas fa-university fa-1x"></i><br>
                    </div>
                    <div class="setting-text">
                      <h5>1 Settings</h5>
                      <p>view settings</p><p>
                    </p></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
          <div class="inforide">
            <div class="row">
              <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="settings">
                    <div class="center">
                      <div class="setting-awesome-font">
                        <i class="fas fa-file-invoice-dollar fa-1x"></i><br>
                      </div>
                      <div class="setting-text">
                        <h5>History</h5>
                        <p>View history</p><p>
                      </p></div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
          <div class="inforide">
            <div class="row">
              <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="settings">
                    <div class="center">
                      <div class="setting-awesome-font">
                        <i class="fas fa-building fa-1x"></i><br>
                      </div>
                      <div class="setting-text">
                        <h5>Settings</h5>
                        <p>View settings</p><p>
                      </p></div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

您可以在小提琴中看到，所有容器都向左对齐。我怎样才能得到货柜中心？

（我的习俗css不在小提琴中，但对情况并不重要，大多数用于文本对齐，着色，装饰等）

Answer 1

您应该使用以下样式在CSS样式中定义容器DOM元素：

显示：flex;
align-items：居中；（垂直居中）
justify-content：居中；（水平居中）

例如：

└───project_main_directory
    │   .gitattributes
    │   .gitignore
    │   README.txt
    │
    ├───code
    │   ├───exploration
    │   └───scripts
    │       │   script1.py
    │       │   script2.py
    │       │   script3.py
    │       │
    │       └───functions
    │           │   function1.py
    │           │   function2.py
    │           └───__init__.py
    │
    ├───data
    │   └───example_data
    │           data.csv
    └───documents

import code.scripts.function.function1 from function1

DOM类div.v-center-container { display: flex; align-items: center; justify-content: center; height: 4em; border: 1px solid black; }中的所有元素都将自动垂直对齐。

Answer 2

您可以使用Bootstrap中的flex类来做到这一点。

Flex文档：https://getbootstrap.com/docs/4.3/utilities/flex/

示例：

<div class="d-flex justify-content-center align-items-center bg-dark text-light p-5">
<div class="border border-danger p-3">centered content</div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

如何垂直对齐包装纸或整个容器？

2 个答案: