时间戳

首页 > 解决方案 > 使用 flexbox 向图像添加文本

html - 使用 flexbox 向图像添加文本

问题描述

我正在寻找向各种 flexbox 项目添加文本。

我正在尝试从该站点https://lolskinshop.com/product-category/lol-skins/作为项目进行一些基本级别的复制。

我遇到的问题是在将文本块 div 添加到图像上时，它正在移动图像或位于下方或侧面。

为了便于阅读，我附上了我的 Codepen 示例。 https://codepen.io/ralbach/pen/gObOZor

  background-color: #000;
  color: white;
}

h1 {
  color: white;
  text-align: center;
  font-family: calibri;
}

h3 {
  color: white;
  text-align: center;
  font-family: calibri;
}
.nav-links {
  align-items: center;
  display: flex;
  list-style: none;
  justify-content: space-between;
  flex-grow: .8;
}

.nav-links li{
  padding: 0px 20px;
}

.nav-links li a{
  transition: all 0.3s ease 0s;
}

.nav-links li a:hover {
color: yellow;
}


li, a{
  color: white;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

nav { 
  display: flex; 
  flex-flow: space-between;
  background-color: rgba(255, 255, 255, .1); 
  align-items: center;
  padding: 30px 10% 30px 10%;
  order: 1;
}

.logo {
  cursor: pointer;
  margin-left: auto;
  order: 3;
}

.champs{
  text-decoration: none;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  cursor: pointer;
  align-items: center;
  margin: 1px 10px 10px 1px;
}

.champ-boxes {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  color: rgba(255,0,255, .9);

}
img{
  opacity: .45;
}
img:hover {
  opacity:1.0;
}
.champ-word{
    position: relative;  
    left: 50%;                       
    top: 50%;                        
    transform: translate(-50%, -50%); 
}


<head>  
</head> 

<nav>
  <img class="logo" src=" https://lolskinshop.com/wp-content/uploads/2015/06/Lolskinshop.com-logo.png" alt="lolskinshop logo">

  <ul class="nav-links">
    <li> <a href="#"> Home </a></li>
    <li> <a href="#"> Skins </a></li>
    <li> <a href="#"> Champions </a></li>
    <li> <a href="#"> Matchup </a></li>
    <li> <a href="#"> About </a></li>
  </ul>
</nav>  
 <body> 
 <div>
  <h1>Divisions</h1>
  <h3>Find your favorite skin sorted alphabetically below! From Aatrox to Zyra, we have them all!
 </div>


<div class="champ-boxes">
  <ul class="champs">
    <li> <img href="#" src="https://lolskinshop.com/wp-content/uploads/2019/10/jinx-ambitious-elf-300x545.png">
    </li>  
      <li> <img href="#" src="https://lolskinshop.com/wp-content/uploads/2019/10/jinx-ambitious-elf-300x545.png">
    </li>
        <li> <img href="#" src="https://lolskinshop.com/wp-content/uploads/2019/10/jinx-ambitious-elf-300x545.png">
    </li>
  </ul>
  <ul class="champs">
    <li>
   <img href="#" src="https://lolskinshop.com/wp-content/uploads/2019/10/caitlyn-arcade-300x545.jpg">
      <div class="champ-word">
    Caitlyn</div>
    </li>

    <li>
      <img href="#" src="https://lolskinshop.com/wp-content/uploads/2019/10/caitlyn-arcade-300x545.jpg"><div class="champ-word">
    Caitlyn</div>
    </li>

    <li><img href="#" src="https://lolskinshop.com/wp-content/uploads/2019/10/caitlyn-arcade-300x545.jpg">
    <div class="champ-word">
    Caitlyn</div>
    </li>
  </ul>
    </div> 

</body>```

标签： htmlcssimagetextflexbox

解决方案

您需要添加相对于 li 的位置并将绝对位置添加到副本。

推荐阅读