Question

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

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

这是它的外观 enter image description here ] 2

这就是我的做法-_-

Answer 1

您的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>

Answer 2

您遇到的问题是根差异，即#banner有两个孩子。 #banner上的属性丝毫不表示这两项应该重叠。您正在尝试通过position:absolute实现这一目标。这也是一种方法。但是，您可以通过以下两种方法来实现所需的目标：

将该图像作为#banner的背景属性放置，并将flexbox属性提供给横幅。

body {
  margin: 0;
  max-width: 100%;
}

#banner {
  position: relative;
  height: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#banner img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.banner-text {
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-around;
}

.flex-text {
  background: #efefef;
}

h1 {
  font-size: 17px;
}

<div id="banner">
  <img src="https://cdn.slashgear.com/wp-content/uploads/2019/07/coffee_main_envat-1280x720.jpg">
  <div class="banner-text">
    <div class="flex-text text1">
      <h1><b>DownTown</b><br/> 384 West 4th St Suite 108</h1>
    </div>
    <div class="flex-text text2">
      <h1><b>East Bayside</b><br/> 3433 Phisherman Avenue </h1>
    </div>
    <div class="flex-text text3">
      <h1><b>Oakdale</b><br/> 515 Crecent avenue Second Floor </h1>
    </div>
  </div>
</div>

将横幅div相对位置定位。然后将图像定位为绝对位置，以使其占据整个宽度，并且标题文本应具有相对位置。如果文本没有居中，您需要做的另一件事是为横幅文本提供100％的宽度。

希望这可以解决问题

Answer 3

您的标记不正确。所以我改变了一点。而且我还相应地更改了CSS，并使用flex来对齐项目。而不是在HTML中使用img，而是使用background属性。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  padding: 1rem;
  background: #333;
}

#banner {
  margin-top: 100px;
}

.banner-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}


/*DownTown*/

.flex-text {
  background-color: rgba(0, 0, 0, 0.384);
  line-height: 4rem;
  padding: 4rem;
  margin: 0rem 2rem;
  text-align: center;
}

<div class="container">
  <div id="banner">
    <!-- <img src="2525.jpeg" /> -->

    <div class="banner-text">
      <div class="flex-text text1">
        <h1>DownTown</h1>
        <p>384 West 4th St</p>
        <p>Suite 108</p>
      </div>
      <div class="flex-text text2">
        <h1>East Bayside</h1>
        <p>3433 Phisherman Avenue</p>
        <p>(Norway Corner)</p>
      </div>
      <div class="flex-text text3">
        <h1>Oakdale</h1>
        <p>
          515 Crecent avenue
        </p>
        <p>
          Second Floor
        </p>
      </div>
    </div>
  </div>
</div>

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

3 个答案: