Html 使用flexbox向图像添加文本_Html_Css_Image_Text_Flexbox

Html 使用flexbox向图像添加文本

html css image text

Html 使用flexbox向图像添加文本,html,css,image,text,flexbox,Html,Css,Image,Text,Flexbox,我希望向各种flexbox项目添加文本作为一个项目，我正在尝试从这个站点进行一些基本级别的复制我遇到的问题是，当在图像中添加文本块div时，它正在移动图像，或者位于图像下方或侧面为了便于阅读，我附上了我的代码笔示例。分部找到你最喜欢的皮肤按字母顺序排序如下！从Aatrox到Zyra，我们都有！凯特琳凯特琳凯特琳 ``` 您需要添加相对于li的位置和副本的绝对位置。这里是示例代码笔 background-color: #000;

我希望向各种flexbox项目添加文本

作为一个项目，我正在尝试从这个站点进行一些基本级别的复制

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

为了便于阅读，我附上了我的代码笔示例。









分部
找到你最喜欢的皮肤按字母顺序排序如下！从Aatrox到Zyra，我们都有！










凯特琳


凯特琳


凯特琳


```

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

这里是示例代码笔

  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>```