如何在CSS(或bootstrap)的所有视点上保持按钮在图像上的中心?

Question

我有一个按钮在我的英雄图像的中心，但按照我目前的方式，我必须使用许多媒体查询来保持它在所有视点的中心。

<style>
.hero-container{
position: relative;
text-align: center;
}
.hero-btn-div{
position: absolute;
top: 50%;
left: 42%;
display: inline-block;
}
.hero-btn{
background-color: transparent;
font: var(--main-sans-serif);
font-size: 1.2em;
border: 1px solid black;
border-radius: 100px;
width: 300px;
height: 50px;
}
</style>
<div class="hero-container">
<img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">
<div class="hero-btn-div"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>

Answer 1

您将更新left:50%并添加此transform:translateX(-50%;)

<style>
.hero-container {
position: relative;
text-align: center;
}
.hero-btn-div {
position: absolute;
top: 50%;
left: 50%;
transform:translateX(-50%);
display: inline-block;
}
.hero-btn {
background-color: transparent;
font: var(--main-sans-serif);
font-size: 1.2em;
border: 1px solid black;
border-radius: 100px;
width: 300px;
height: 50px;
}
</style>
<div class="hero-container">
<img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">
<div class="hero-btn-div"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>

Answer 2

很难说您想要完成什么，因为我们无法看到图像或不知道.img-fluid类应该做什么。但是，既然你的主要问题似乎是内容的中心，我建议你研究一下"显示:柔性"。属性(更多信息在这里)。此外，这对您来说可能是一个方便的工具。

如果下面的解决方案对你有效，我会尝试保持按钮居中:

.hero-container{
display: flex;
justify-content: center;
position: relative;
}
.hero-btn-div{
position: absolute;
}
.hero-btn{
background-color: transparent;
font: var(--main-sans-serif);
font-size: 1.2em;
border: 1px solid black;
border-radius: 100px;
width: 300px;
height: 50px;
}

<div class="hero-container">
<img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">
<div class="hero-btn-div">
<a href="#">
<button class="hero-btn">Button</button>
</a>
</div>
</div>

Answer 3

您可以将按钮的包装器拉伸到容器的完整尺寸，并使用display: flex将按钮居中。不要忘记指针事件.

.hero-container {
position: relative;
}
.hero-btn-div {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.hero-btn {
background-color: transparent;
font: var(--main-sans-serif);
font-size: 1.2em;
border: 1px solid black;
border-radius: 100px;
width: 300px;
height: 50px;
pointer-events: auto;
}

Answer 4

有很多方法，但我会使用Bootstrap的flexbox类…

<div class="hero-container">
<img src="..." class="img-fluid" width="1920px" alt="Artwork">
<div class="hero-btn-div d-flex align-items-center justify-content-center"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>

使用全尺寸绝对容器…

.hero-btn-div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

响应演示

Answer 5

一种解决方案是在容器div中添加图片作为CSSbackground-image属性，然后通过flexbox居中按钮。

另一个解决方案是在容器div中绝对位置图像，然后通过flexbox ->例子:

.hero-container {
position: relative;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
overflow: hidden;
}
.hero-container .bg-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.hero-btn {
position: relative;
background-color: transparent;
font: var(--main-sans-serif);
font-size: 1.2em;
border: 1px solid black;
border-radius: 100px;
width: 300px;
height: 50px;
}

<div class="hero-container">
<div class="bg-img">
<img src="https://picsum.photos/200/300" class="img-fluid" width="100%" alt="Artwork">
</div>
<div class="hero-btn-div">
<a href="#">
<button class="hero-btn">Button</button>
</a>
</div>
</div>

PS:如果你想建立一个响应式的网页，不要使用固定的大小(1920px)。