在 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 右侧固定数量的像素。
我怎样才能做到这一点?
最佳答案
应该这样做:
.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 以定位它。
关于html - 在 Bootstrap 4 容器中居中和偏心定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59273309/