首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将文本放置在多个图像上

将文本放置在多个图像上
EN

Stack Overflow用户
提问于 2019-06-27 05:43:41
回答 2查看 1.3K关注 0票数 0

我试图使用引导和css在多个图像上对文本进行居中。大多数googling说,我需要使用的位置:绝对;然而,我能做的是居中的文本在屏幕的中部,而不是在图像上。我相信引导是有意义的,但我找不到阻止它的原因,目标是让动画在图像上像渐入佳境那样向前移动。

我已经检查了这方面的多个帖子,但它们似乎都是只有当它的一个图像工作。试图处理多个图像似乎需要一种不同的方法。

编辑:由于这被标记为一个副本,我想指出的是,另一篇文章只显示了一个图片的工作。当涉及到多个图像时,另一个帖子不起作用。

有关守则的部分:

代码语言:javascript
运行
复制
      .imgText {
        position: absolute;
        z-index: -1;
      }
      
      .imgList {
        z-index: -2;
      }
代码语言:javascript
运行
复制
    <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/

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-27 05:58:15

这就是你要的

JSFiddle

您需要将父元素设置为position: relative,因此它相对于绝对定位元素,在本例中是文本。

这是元素的水平和垂直中心:

top: 50%; left: 50%; transform: translate(-50%, -50%)

此外,您还需要应用z-index,以便文本出现在图像的上方。

代码语言:javascript
运行
复制
.ml-4 {
    position: relative;
}

.imgText.m-auto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
代码语言:javascript
运行
复制
<!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>

票数 1
EN

Stack Overflow用户

发布于 2019-06-27 05:47:24

尝尝这个

代码语言:javascript
运行
复制
.imgText {
    position: absolute;
    transform:translate(-50%,-50%);
     top:50%;
    left:50%;
    z-index: 22;
  }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56784614

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档