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

Question

我需要将我的导航条与我的容器对齐。正如你所看到的，我需要将我的导航栏品牌与其余的代码对齐。在打印中，你可以看到它是如何......我不知道我应该做什么。

看看它是如何的

这是我的代码。

<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应用margin或padding

要解决情况1，你可以在图像编辑软件中裁剪图像以去除多余的透明空间，或者（如果你不能编辑图像）应用负片。margin-left 用CSS把标志 "拉 "到左边，像这样。

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

在案例2中，你会添加CSS来覆盖页边距和页边距，像这样：

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