在多个图像上放置文本[重复]答案

【问题标题】：Placing text over multiple images [duplicate]在多个图像上放置文本[重复]
【发布时间】：2019-06-27 05:43:41
【问题描述】：

我正在尝试使用引导程序和 css 将文本集中在多个图像上。大多数谷歌搜索说我需要使用 position: absolute; 然而，我能做的最多是将文本放在屏幕中间而不是图像上方。我相信它与引导程序有关，但我找不到阻止它的原因目标是让文本在图像上具有动画效果，例如淡入等

我已经检查了多篇关于此的帖子，但它们似乎都只有在一张图片时才有效。尝试处理多个图像似乎需要不同的方法

编辑：由于这被标记为重复，我想指出另一篇文章只显示这个使用一个图像。当涉及到多个图像时，另一个帖子不起作用

有问题的代码部分：

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

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

给你

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>

【讨论】：

我什至没想过要使用 transform 属性
我想说这并不常见 - 如果您有兴趣，可以阅读它的工作原理here

【解决方案2】：

试试这个

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

【讨论】：

这似乎通过允许它覆盖在图像上而起作用
但是它仍然没有居中jsfiddle.net/nicholascox2/o29n78dL/64