我是編碼新手，我正在使用引導程式 4。我想將文本與影像重疊并將其對齊到中心，這是代碼......請幫忙
HTML
<div class="container-fluid front_page">
<img src="images/front_page_img.jpg" alt="front_page_image" class="front_page_img">
<div class="front_page_brand">
<h1>T.A.C.S.</h1>
</div>
CSS
.container-fluid {
padding: 0;
}
/* FRONT PAGE */
.front_page {
position: relative;
}
.front_page_img {
max-width: 100%;
position: absolute;
}
.front_page_brand {
position: absolute;
color: red;
}
uj5u.com熱心網友回復：
.front_page_brand {
position: absolute;
color: red;
left: 50%;
transform: translate(-50%, 0);
}
uj5u.com熱心網友回復：
您需要做的就是 flex 父容器和justify-content: center;. 然后，由于您的位置已經是絕對的，它將與影像重疊。查看下面的代碼片段。
.container-fluid {
padding: 0;
}
/* FRONT PAGE */
.front_page {
position: relative;
display: flex;
justify-content: center;
}
.front_page_img {
max-width: 100%;
position: absolute;
}
.front_page_brand {
position: absolute;
color: red;
}<div class="container-fluid front_page">
<img src="https://dummyimage.com/400/000/fff" alt="front_page_image" class="front_page_img">
<div class="front_page_brand">
<h1>T.A.C.S.</h1>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/377888.html
標籤：html css bootstrap-4