我試圖在一個 bibber 的中心放置一個小影像。兩個影像都在 Bootstrap 列中。
<div className="row justify-content-center my-5 ">
<div className="col-xs-10 col-sm-6 my-auto mx-auto">
<Fade left duration={1000} delay={1000} fraction={0.1} >
<div className="father">
<img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
<img src="/img/logo02.png" alt="logo" className="logo"/>
</div>
</Fade>
</div>
這就是css。
.padreImagenes{
/* background-image: url("../../assets/img/edificios.jpg"); */
text-align: center;
}
.biggerImg{
position: relative;
opacity: 0.8;
}
.logo{
position: absolute;
/* position: absolute;
transform: translate(-200%, 70%); */
/* position: absolute;
top: 60px;
left: 80px; */
}
正如您在注釋的 CSS 代碼中看到的那樣，我嘗試將較小的影像設定為絕對影像，并嘗試使用頂部、左側甚至轉換/翻譯。問題在于，當網站適應用戶螢屏尺寸時，它不會保持居中。
將兩個影像與 photoshop 結合不是一種選擇，因為我想對“較小的影像”應用??效果。
謝謝，
uj5u.com熱心網友回復：
嘗試：
.logo {
position: absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
div {position:relative; display:inline-block;}
img {display:block;}
.logo {
position: absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}<div>
<img src="https://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" alt="">
<img src="https://blogs.salleurl.edu/sites/default/files/blogs/emprendedores/chrome_hacked_Pwnium-300x300.jpg" alt="" class="logo">
</div>uj5u.com熱心網友回復：
您可以將影像容器設定為display: flex并使用 flex 屬性將元素居中。
不過，我還沒有用 bootstrap 測驗過，所以可能會有一些樣式沖突。
.father {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
position: absolute;
}<div class="row justify-content-center my-5 ">
<div class="col-xs-10 col-sm-6 my-auto mx-auto">
<div class="father">
<img height="110%" width="100%" class="img-fluid biggerImg" src="https://picsum.photos/200/150
" alt="edificios"/>
<img src="https://picsum.photos/100/100
" alt="logo" class="logo"/>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320844.html
標籤：html css 推特引导 bootstrap-4
上一篇：Bootstrap：引導網格
下一篇：全寬三列行上的水平滾動條