如何使用HTML和CSS在淡入淡出的疊加層中居中顯示文本？

Question

我看過本教程，該教程為我提供了有關如何創建將圖像懸停在其上時變成文本的圖像的說明。

但是，我的文字對於圖像來說太大了，因此我試圖減少懸停疊加層的邊距。

我更改了.text類，以使頂部和左側均為20％，還更改了transform屬性以及ms-transform屬性。 但是現在的問題是文本不再居中

請參閱下面的代碼並在此處進行代碼筆

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-20%, -20%);
  -ms-transform: translate(-20%, -20%);
  text-align: center;
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://s4827.pcdn.co/wp-content/uploads/2016/03/stack_overflow_logo.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.


</div>
  </div>
</div>

</body>
</html>

問題在於文本未居中（請參見下文）：

Answer 1

克里斯

您只需要編輯.text轉換即可。

您的固定代碼在這里

    .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  text-align: center;
}

Answer 2

因此，根據您希望的外觀，艾夫發現了兩種不同的方式，很可能可以找到更多的方式。

刪除轉換並添加right: 20%; 以及看起來像這樣： https : //codepen.io/anon/pen/YvMNje
刪除變換，左邊：20％; 它看起來像這樣： https : //codepen.io/anon/pen/xzegaq

如何使用HTML和CSS在淡入淡出的疊加層中居中顯示文本？

問題描述

2 個解決方案

解決方案1
1 2018-07-03 18:54:23

解決方案2
1 已采納 2018-07-03 19:10:30

如何使用HTML和CSS在淡入淡出的疊加層中居中顯示文本？

問題描述

2 個解決方案

解決方案1 1 2018-07-03 18:54:23

解決方案2 1 已采納 2018-07-03 19:10:30

解決方案1
1 2018-07-03 18:54:23

解決方案2
1 已采納 2018-07-03 19:10:30