在图像上正确放置文本{CSS HTML}

debugcn 发表于 Dev

SapirFrontEnd

[如何在图像上正确放置文字？我有三个文本块，我想将它们放置在图像的同一行上，但是我很努力:(

#banner {
        
        justify-content: center;
        height: 600px;
        margin-top: 100px;
        margin-left: 10%; }
    
    .banner-text {
        color: white;
        justify-content: center;
        justify-content: space-around;
        text-align: center;
        display: inline-block;
        position: absolute;
        flex-direction: column; }
    
    /*DownTown*/ 
     .flex-text {

       background-color: grey;    
       text-align: center;
     }

html

 <div id="banner"><img src="2525.jpeg">
        
           
           <div class="banner-text">
            <div class="flex-text text1">
               <h1><b>DownTown</b> 384 West 4th St Suite 108</h1>
            <div class="flex-text text2">
                <h1><b>East Bayside</b>  3433 Phisherman Avenue </h1>
            <div class="flex-text text3">
                <h1><b>Oakdale</b> 515 Crecent avenue Second Floor </h1>    
            
            </div>    
                </div>
                </div>
                </div>
            </div>

这是它的外观在此处输入图片说明 ] 2

那就是我的做法-_-

优素福

您的html标记不正确，而不是将图像添加为中的img元素，而是#banner使用CSS将图像添加为背景图像。这样，您就不需要在文本上放置文本的绝对位置。之后，使用flexbox对齐元素。

#banner {
  background-image: url(https://picsum.photos/500);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text {
  color: white;
  justify-content: space-around;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.flex-text {
  background-color: #222;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  padding: 20px;
  width: 200px;
  margin: 5px;
}

h1 {
  margin: 0;
}

<div id="banner">

  <div class="banner-text">
    <div class="flex-text text1">
      <h1>DownTown</h1>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
    <div class="flex-text text1">
      <h1>DownTown</h1>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
    <div class="flex-text text1">
      <h1>DownTown</h1>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
  </div>
  
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。