css - 屏幕尺寸减小时如何将导航图像居中对齐

Question

我正在创建一个导航栏，如下所示

<!-- #region Navigation -->
<div class="container ">
    <nav class="navbar navbar-fixed-top bg-white box-shadow " style="border-bottom: 4px solid #2878b7;">
        <a class="navbar-brand" href="@_appSettings.Value.CandidateUrl">
            <customerImage></customerImage>
        </a>
    </nav>
</div>
<!-- #endregion -->

我全屏时的图像：

我需要像以下屏幕尺寸减小的图像，但我没有得到：

请让我知道如何在减小屏幕尺寸的情况下将其对齐中心。

标签： cssbootstrap-4

Answer 1

当您将 flex 对齐与自动边距混合使用时，Flexbox 可以做一些非常棒的事情 https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

navbar显示是flex并且navbar-brand是弹性项目（在您的标记中）。

一种解决方案是使用margin-left: auto margin-right: auto;.

https://getbootstrap.com/docs/4.0/utilities/spacing/#horizo​​ntal-centering

将 mr-auto类（间距文档）添加到navbar-brand. margin-left: auto并且仅在某些宽度下通过自定义代码（Boostrap 是“移动优先”，所有断点都使用min-widthnot max-width）。

@media only screen and (max-width: 600px) {
  .navbar-brand {
    margin-left: auto;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a style="background: red;" class="navbar-brand mr-auto" href="#">Logo</a>
</nav>

用于测试，expand snippet并更改窗口的宽度。