欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在圖片上定位文本，而不需要用CSS移動每一張圖片

CSS

當(dāng)我試圖移動圖像上的文字時，文字會移動，但是當(dāng)兩個圖像時，我需要移動每個位置的文字，如何解決這個問題？

.container {
  height: 1224px;
  width: 90%;
  margin: 100px auto;
}

.row {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  /* width: 50%; */
}

.category {
  /* width: 50%; */
}

.image {
  height: 300px;
}

.image img {
  height: 100%;
  width: 100%;
  border-radius: 8px;
}

.title {
  position: absolute;
  top: 50%;
}

<div class="container">
  <div class="row">
    <div class="category">
      <div class="image">
        <img src="img1.jpeg" alt="">
      </div>
      <div class="title">
        <h2>Title</h2>
      </div>
    </div>
    <div class="category">
      <div class="image">
        <img src="img1.jpeg" alt="">
      </div>
      <div class="title">
        <h2>Title</h2>
      </div>
    </div>
  </div>
</div>

用css網(wǎng)格構(gòu)建頁面總是好得多，在網(wǎng)格的1個元素中你可以使用flex。 到& quot移動& quot如果你的div是相對的，絕對的或者浮動的，你的文本必須向上移動1層。

.container {
  height: 1224px;
  width: 90%;
  margin: 100px auto;
}

.row {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px;
}

.category {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.image img {
  height: auto;
  border-radius: 8px;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="row">
    <div class="category">
      <div class="image">
        <img src="https://picsum.photos/300" alt="">
      </div>
      <div class="title">
        <h2>Title</h2>
      </div>
    </div>
    <div class="category">
      <div class="image">
        <img src="https://picsum.photos/300" alt="">
      </div>
      <div class="title">
        <h2>Title</h2>
      </div>
    </div>
  </div>
</div>

總是有這樣一個問題:你如何構(gòu)建你的html來獲得你想要的css。

如果我明白你在問什么

.container {
  height: 1224px;
  width: 90%;
  margin: 100px auto;
}

.row {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  align-items: center;
}

.category:nth-child(odd) {
  text-align: right
}

.category:nth-child(even) {
  text-align: left;
}

.image {
  display: inline-block;
  position: relative;
}

.image img {
  height: auto;
  border-radius: 8px;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="row">
    <div class="category">
      <div class="image">
        <img src="https://picsum.photos/300" alt="">
        <div class="title">
          <h2>Title</h2>
        </div>
      </div>
    </div>
    <div class="category">
      <div class="image">
        <img src="https://picsum.photos/300" alt="">
        <div class="title">
          <h2>Title</h2>
        </div>
      </div>
    </div>
  </div>
</div>