我试图使用引导和css在多个图像上对文本进行居中。大多数googling说,我需要使用的位置:绝对;然而,我能做的是居中的文本在屏幕的中部,而不是在图像上。我相信引导是有意义的,但我找不到阻止它的原因,目标是让动画在图像上像渐入佳境那样向前移动。
我已经检查了这方面的多个帖子,但它们似乎都是只有当它的一个图像工作。试图处理多个图像似乎需要一种不同的方法。
编辑:由于这被标记为一个副本,我想指出的是,另一篇文章只显示了一个图片的工作。当涉及到多个图像时,另一个帖子不起作用。
有关守则的部分:
.imgText {
position: absolute;
z-index: -1;
}
.imgList {
z-index: -2;
}
<div class="row justify-content-center mt-3">
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
</div>
您可以在这里看到实时结果,https://jsfiddle.net/nicholascox2/o29n78dL/61/
发布于 2019-06-27 05:58:15
这就是你要的
您需要将父元素设置为position: relative
,因此它相对于绝对定位元素,在本例中是文本。
这是元素的水平和垂直中心:
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
此外,您还需要应用z-index
,以便文本出现在图像的上方。
.ml-4 {
position: relative;
}
.imgText.m-auto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nerd Arcadia</title>
<meta name="description" content="">
<meta name="author" content="">
<style>
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* SPACING FOR PICTURES ON SMALLER SCREENS */
@media screen and (max-width: 420px) {
.imgList {margin-top: 25px;}
}
.imgText {
position: absolute;
z-index: -1;
}
.imgList {
z-index: -2;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="nav">
<span id="navButton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<img id="logo" class="justify-content-center m-auto" src="https://via.placeholder.com/200x100">
</div>
<div class="row justify-content-center mt-3">
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
发布于 2019-06-27 05:47:24
尝尝这个
.imgText {
position: absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
z-index: 22;
}
https://stackoverflow.com/questions/56784614
复制相似问题