Question

我正在尝试使用引导程序和CSS将文本放在多个图像上。大多数谷歌搜索人士说我需要使用位置：绝对；但是，我最能做的就是将文本居中放置在屏幕中央，而不是放置在图像上方。我相信它与引导程序有关，但我找不到阻止它的内容目标是使文本在图像上具有动画效果，如淡入淡出等等。

我已经检查了多个关于此的帖子，但是它们似乎仅在其图像为一幅的情况下才起作用。尝试处理多张图像似乎需要一种不同的方法

编辑：由于这被标记为重复，因此我想指出，另一篇文章仅显示了使用一个图像的情况。涉及多张图片的另一篇文章不起作用

有问题的代码部分：

      
      .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/

Answer 1

尝试

.imgText {
    position: absolute;
    transform:translate(-50%,-50%);
     top:50%;
    left:50%;
    z-index: 22;
  }

Answer 2

你在这里

JSFiddle

您需要将父元素设置为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()">&times;</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()">&#9776;</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>

将文字放在多张图片上

2 个答案: