如何在容器（CSS）中对齐？

Question

我需要将导航栏与容器对齐。如您所见，我需要将我的导航栏品牌与其余代码对齐。在打印中您可以看到它是怎样的。我不知道该怎么办。

see how it is

这是我的代码：

<div class="container">
        <nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="#">
            <img src="assets/img/nav_logo.png" width="50" height="50" alt="">
          </a>
          <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Products</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">FAQ</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link dash-button" href="#"><i class="far fa-user"></i> Sign in</a>
                </li>
            </ul>
          </div>
        </nav>
        <div class="main-text">
        <div class="row">
            <div class="col-md-6 col-xs-12">
                <h2>This is the title</h2>
                <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>
                <br>
            </div>
        </div>
        </div>

        </div>

Answer 1

不看所涉及的 CSS 就很难说，但两种常见的情况是：

1. nav_logo.png 包括图像两侧的透明空间
2. 图像没有额外的透明空间，但<a class="navbar-brand"> 通过 CSS 应用了边距或填充

要修复案例 1，您可以在图像编辑软件中裁剪图像以删除额外的透明空间，或者（如果您无法编辑图像）使用 CSS 应用负数 margin-left 以“拉”左边的标志是这样的：

.navbar-brand {
  margin-left: -20px /* whatever value achieves the desired visual effect */
}

在情况 2 中，您将添加 CSS 以覆盖边距和/或填充，如下所示：

.navbar-brand {
  margin-left: 0;
  padding-left: 0;
}