how to place in center the text inside the avatar image

Question

Hi guys i just want to know how to place in the center of the image those text inside the image when dragging the mouse inside the image can anyone help? thank you guys

i want to place the text in the center of each avatar image when dragging the mouse inside of it Thank you guys i want to center the text inside the avatar image each avatar supposed to have a text in the center

img {
  border-radius: 50%;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 10px solid white;
}

.container {
  position: relative;
  width: 20%;
  float: left;
}

.image {
  opacity: 1;
  width: 50%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(17%, -20%);
  -ms-transform: translate(50%, 50%);
  text-align: center;
}

.last {
  /*position: relative;
  float: none;
  margin: auto;*/
  display: inline-block;
  float: none;
}

.audio {
  position: relative;
  float: none;
  margin: auto;
}

.container:hover .image {
  opacity: 0.5;
}

.text {
  background-color: #dbe0dc;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}


}
.container:hover .image {
  opacity: 0.5;
}
.container:hover .middle {
  opacity: 1;
}

<center>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 1</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 2</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 3</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 4</div>
    </div>
  </div>
  <div class="last container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 5</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 6</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 7</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 8</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 9n</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 10</div>
    </div>
  </div> <br>
  <div class="last container"><br>
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px"> <br>
    <div class="middle">
      <div class="text">avatar 11</div>
    </div>
  </div>
  <Br>
</center>

@kukkuz Appreciate that there's 100s of dupe, but there's more to this question having some styles that are fundamentally wrong. Example, the use of `
` and the `img` going out of the width. — Praveen Kumar Purushothaman, Mar 21 '19 at 16:42
I added the dupe because when I applied the above styles the *centering works fine* and that was the question right? :) — kukkuz, Mar 21 '19 at 16:44
@kukkuz Nopes, not in the smaller screen. Check it out. The solution I gave now works even in the smaller screens and it's responsive. Added some previews. — Praveen Kumar Purushothaman, Mar 21 '19 at 16:44
as you are rightly saying in your answer that is because the images are not *constrained* to their containers... :) — kukkuz, Mar 21 '19 at 16:47
@PraveenKumarPurushothaman please feel free to reopen (if you feel so) as your answer conveys all the details the OP need to *fix* their code - in the end that's all that matters :) — kukkuz, Mar 21 '19 at 16:59

score 0 · Answer 1 · answered Mar 21 '19 at 16:39

I would say this is not a duplicate, IMHO because of the following flaws, see points #1 and #2.

With the following changes, I was able to make it middle:

Give the img a max-width to not exceed the container.
The dead centre trick. See the .middle class.
Since you are using float: left, there's no need of breaks, so br {display: none;}.

img {
  border-radius: 50%;
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 10px solid white;
}

.container {
  position: relative;
  width: 20%;
  float: left;
}

br {display: none;}

.image {
  opacity: 1;
  width: 50%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: #dbe0dc;
}

.last {
  /*position: relative;
  float: none;
  margin: auto;*/
  display: inline-block;
  float: none;
}

.audio {
  position: relative;
  float: none;
  margin: auto;
}

.container:hover .image {
  opacity: 0.5;
}

.text {
  background-color: #dbe0dc;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}


}
.container:hover .image {
  opacity: 0.5;
}
.container:hover .middle {
  opacity: 1;
}

<center>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 1</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 2</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 3</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 4</div>
    </div>
  </div>
  <div class="last container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 5</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 6</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 7</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 8</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 9n</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 10</div>
    </div>
  </div> <br>
  <div class="last container"><br>
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px"> <br>
    <div class="middle">
      <div class="text">avatar 11</div>
    </div>
  </div>
  <Br>
</center>

Preview

how to place in center the text inside the avatar image

1 Answers1