将文本居中放在图像上

时间：2017-10-25 14:02:38

标签： html css

我知道这个问题已经被问了很多，而且我从以前的解决方案中获益良多。但是，我似乎无法让这个工作。在我的网页上，以下代码导致文本在整个页面上居中，而不仅仅是父div。出于某种原因，代码段显示了第一行“图像”上的文本，但没有显示其他文本。我做错了什么？

body, html {
	height: 100vh;
}

.hover_img {
	display: inline-block;
	width: 100%;
	margin: 0 0 1em 0;
}

.hover_img img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

.container {
	-webkit-columns: 20em 3;
    -moz-columns: 20em 3;
    columns: 20em 3;
	
	-webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
	
	margin-top: 2em;
}

.hover_img h4 {
	color: black;
}

.hover_img:hover img {
	opacity: .2;
}

.hover_img:hover .center_text {
	display: block;
}

.center_text {
	position: absolute;
	top: 50%;
	display: none;
	font-weight: bold;
	text-align: center;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Images</title>
	</head>
	
  <body>
		<div class="container">
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
						
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
						
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
		</div>
	</body>
</html>

2 个答案:

答案 0 :(得分：2)

您需要将position: relative;添加到.hover_img课程。您的文本使用绝对定位，并将相对于最近的定位祖先元素定位。如果没有祖先有定位，那么它将相对于浏览器视口。

body,
html {
  height: 100vh;
}

.hover_img {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 1em 0;
}

.hover_img img {
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
}

.container {
  -webkit-columns: 20em 3;
  -moz-columns: 20em 3;
  columns: 20em 3;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  margin-top: 2em;
}

.hover_img h4 {
  color: black;
}

.hover_img:hover img {
  opacity: .2;
}

.hover_img:hover .center_text {
  display: block;
}

.center_text {
  position: absolute;
  top: 50%;
  display: none;
  font-weight: bold;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>Images</title>
</head>

<body>
  <div class="container">
    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>

    <div class="hover_img">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg">
      <div class="center_text">
        <h4>Here is some information about the image...</h4>
      </div>
    </div>
  </div>
</body>

</html>

答案 1 :(得分：2)

您需要为父容器提供定位上下文：

.hover_img {
    display: inline-block;
    width: 100%;
    margin: 0 0 1em 0;
    position: relative; // <-- give positioning context!
}

通过将position: relative;添加到父容器，文本将相对于此元素定位自己。

本文提供了一个很好的解释：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context 

body, html {
	height: 100vh;
}

.hover_img {
	display: inline-block;
	width: 100%;
	margin: 0 0 1em 0;
  position: relative;
}

.hover_img img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

.container {
	-webkit-columns: 20em 3;
    -moz-columns: 20em 3;
    columns: 20em 3;
	
	-webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
	
	margin-top: 2em;
}

.hover_img h4 {
	color: black;
}

.hover_img:hover img {
	opacity: .2;
}

.hover_img:hover .center_text {
	display: block;
}

.center_text {
	position: absolute;
	top: 50%;
	display: none;
	font-weight: bold;
	text-align: center;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Images</title>
	</head>
	
  <body>
		<div class="container">
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
						
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
						
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
			
			<div class="hover_img">
				<img src="https://www.w3schools.com/w3css/img_lights.jpg">
				<div class="center_text">
          <h4>Here is some information about the image...</h4>
        </div>
			</div>
		</div>
	</body>
</html>

相关问题
最新问题