html - 在 Bootstrap 4 容器中居中和偏心定位元素

Question

在 Bootstrap 4 中，我有一个 container-fluid。我在容器的中央放置了一个 Logo 。

<div class="container-fluid d-flex justify-content-center align-items-center">
  <img src="logo.png">
<div>

现在我想添加一个额外的元素作为一个按钮。

<a href="#" class="btn btn-secondary">button</a>

按钮应该垂直居中。它的水平位置应该是 Logo 右侧固定数量的像素。

我怎样才能做到这一点？

Answer 1

应该这样做:

.logo-container a.btn {
  left: calc(100% + 50px);
  white-space: nowrap;
}

/* CSS below is not required, just added it for SO*/
.logo-container {
  min-height: 10rem;
  margin-top: 2rem;
  background-color: #f5f5f5;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid d-flex justify-content-center align-items-center logo-container">
  <div class="position-relative d-flex align-items-center">
    <img src="https://picsum.photos/150/50">
    <a href="#" class="btn btn-secondary position-absolute">How to buy</a>
  </div>
<div>

简而言之，您需要一个包装器，在 Logo 周围使用 position:relative 并在按钮上使用 position:absolute。我使用 bootstrap 的 flex 将按钮垂直居中。

按钮的定位是通过 CSS left: calc(100% + 50px) 完成的，其中 50px 可替换为 “固定数量的像素" 你说的是。

请注意，我在容器 .logo-container 上放置了一个自定义类。你显然可以用你想要的任何东西替换它。重点是在不影响您在元素中可能拥有的其他容器/按钮的情况下定位该元素。

如果你真的不喜欢自定义选择器(这非常好，顺便说一句)为了这个演示的目的，我可以使用

.container-fluid > .position-relative img + a.btn-secondary.position-absolute {
  left: calc(100% + 50px);
}

太长了，但是恕我直言，足够具体了。或者您可以在按钮上放置一个唯一 ID 以定位它。