Question 184021 in Html Question posted in
Some basic documentation can be found here.

Html – How to position text over an image and not need to move for every image with CSS

How do I center a text over an in css?

when i try to move `text over image then text is move but when two images then i need to move text for every position how to solve this problem.

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

when i try to move `text over image then text is move but when two images then i need to move text for every position how to solve this problem.

Tags:

2

Answers


  1. 0

    always lot better to structure the page with css grid, after in 1 element of the grid you can use flex.
    to "move" over, your text has to move 1 layer up, can be done if your div is relative, absolute or float.

    .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>
    Login or Signup to reply.
  2. 0

    always question of way you structure your html to have the right css to achieve what you want.

    if I understand what you’re asking

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search