1

Estoy realizando un perfil con su imagen de verificado, pero no logro conseguir que la imagen check se ponga al lado de la imagen del perfil, puse el div padre del check como position:absolute pero tampoco me funciona.

.profile-banner{
  width: 100%;
  max-height: 170px;
  min-height: 170px;
  background: blue;
}


.content-profile{
  text-align: center;
}

.profile-img img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
}

.check-profile img{
    width: 20px
}
    
<div class="profile-banner">
      <div class="content-profile">
        <div class="profile-img">
        <img src="https://www.digmefitness.com/files/members/000/005/687/1490956902_1ZR6E_Blank-Avatar-Image.png" alt="">
        </div>
        <div class="check-profile">
          <div class="check-profile-position">
            <img src="http://image.prntscr.com/image/1336ad9d5388454f9b451914f4129c22.png" alt="">
          </div>
        </div>
        <div class="profile-name-ml">
          <span>User Name</span>
        </div>
      </div>
    </div>

Lo que deseo hacer es que la imagen de verificado esté como este ejemplo:

introducir la descripción de la imagen aquí

4 respuestas 4

3

Usando tu marcado, primero debes hacer .check-profile un elemento inline-block o inline para que no ocupe el 100% del contenedor. Luego, hacerlo absoluto y al padre .content-profile hacerlo relativo para que el check lo tome como referencia al posicionar. Finalmente, para que esté en el borde derecho, haz uso de calc para sumar 50px (mitad del ancho del avatar) a 50% (centro).

Ejemplo

.profile-banner {
  width: 100%;
  max-height: 170px;
  min-height: 170px;
  background: blue;
}

.content-profile {
  position: relative;
  text-align: center;
}

.profile-img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
}

.check-profile {
  display: inline-block;
  position: absolute;
  left: calc(50% + 50px);
  top: 50%;
  transform: translateY(-50%);
}

.check-profile img {
  width: 20px
}

.profile-name-ml span {
  color: #fff;
}
<div class="profile-banner">
  <div class="content-profile">
    <div class="profile-img">
      <img src="https://www.digmefitness.com/files/members/000/005/687/1490956902_1ZR6E_Blank-Avatar-Image.png" alt="">
    </div>
    <div class="check-profile">
      <div class="check-profile-position">
        <img src="http://image.prntscr.com/image/1336ad9d5388454f9b451914f4129c22.png" alt="">
      </div>
    </div>
    <div class="profile-name-ml">
      <span>User Name</span>
    </div>
  </div>
</div>

Usando un marcado apropiado no es necesario usar calc ni hacer el check absoluto. Solo basta agrupar el avatar con el check y hacerlos elementos en línea para que estén alineados horizontalmente.

Ejemplo

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

.profile-banner {
  width: 100%;
  max-height: 170px;
  min-height: 170px;
  padding: 20px;
  background: #f39c12;
}

.content-profile {
  text-align: center;
}

.profile-img {
  align-items: center;
  display: inline-flex;
}

.profile-img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
  background-clip: padding-box;
  background-position: bottom 10px, right 10px;
}

.check-profile {
  display: inline-block;
}

.check-profile img {
  height: 25px;
  width: 25px
}

.profile-name-ml {
  padding: 10px 25px 0 0;
}

.profile-name-ml span {
  color: #fff;
}
<div class="profile-banner">
  <div class="content-profile">
    <div class="profile-img">
      <img src="https://www.digmefitness.com/files/members/000/005/687/1490956902_1ZR6E_Blank-Avatar-Image.png" alt="">
      <div class="check-profile">
        <div class="check-profile-position">
          <img src="http://image.prntscr.com/image/1336ad9d5388454f9b451914f4129c22.png" alt="">
        </div>
      </div>
    </div>
    <div class="profile-name-ml">
      <span>User Name</span>
    </div>
  </div>
</div>

También hay una tercera alternativa, usando :after para poner la imagen como fondo. Para el centrado vertical, haces el elemento after absoluto, le das top: 50% y transform: translateY(-50%). Con esto el check se centrará verticalmente.

Ejemplo

.profile-banner {
  width: 100%;
  max-height: 170px;
  min-height: 170px;
  background: blue;
}

.content-profile {
  position: relative;
  text-align: center;
}

.profile-img {
  display: inline-block;
  position: relative;
}

.profile-img:after {
  background: url("http://image.prntscr.com/image/1336ad9d5388454f9b451914f4129c22.png") no-repeat;
  background-size: cover;
  content: "";
  height: 20px;
  left: 100%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  width: 20px;
}

.profile-img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
}

.check-profile {
  display: inline-block;
  position: absolute;
  left: calc(50% + 50px);
  top: 50%;
  transform: translateY(-50%);
}

.check-profile img {
  width: 20px
}

.profile-name-ml span {
  color: #fff;
}
<div class="profile-banner">
  <div class="content-profile">
    <div class="profile-img">
      <img src="https://www.digmefitness.com/files/members/000/005/687/1490956902_1ZR6E_Blank-Avatar-Image.png" alt="">
    </div>
    <div class="profile-name-ml">
      <span>User Name</span>
    </div>
  </div>
</div>

2
  • Muy buena explicación Gustavo, muchas gracias!! Commented el 28 abr. 2017 a las 1:11
  • You're welcome ;)
    – gugadev
    Commented el 28 abr. 2017 a las 1:13
1

Una opción sería aplicar una posición relative al check para luego manipular su posición con top , left .

.profile-banner{
  width: 100%;
  max-height: 170px;
  min-height: 170px;
  background: blue;
}


.content-profile{
  text-align: center;
}

.profile-img img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
}

.check-profile img{
    width: 20px;
    position: relative;
    top:-25px;
    left: 35px;
}
<div class="profile-banner">
      <div class="content-profile">
        <div class="profile-img">
        <img src="https://www.digmefitness.com/files/members/000/005/687/1490956902_1ZR6E_Blank-Avatar-Image.png" alt="">
        </div>
        <div class="check-profile">
          <div class="check-profile-position">
            <img src="http://image.prntscr.com/image/1336ad9d5388454f9b451914f4129c22.png" alt="">
          </div>
        </div>
        <div class="profile-name-ml">
          <span>User Name</span>
        </div>
 </div>
</div>

O aplicar una Transformación directamente :

.check-profile img{
  width: 20px;
  position: relative;    
  transform: rotate(500deg) translate(-3em) rotate(-500deg);
}
1
  • Muchas gracias, Dev. Joel, el pero el div está ocupando un espacio jeje, alguna manera de hacerlo desaparecer? Gracias. Commented el 28 abr. 2017 a las 1:01
1

Tienes que hacer que el div check este dentro del div de la imagen de perfil, le das al div la propiedad position:relative; y al check position:absolute; entonces ya puedes acomodar la posicion con top, left, right o bottom

.profile-banner{
  width: 100%;
  max-height: 170px;
  min-height: 170px;
  background: blue;
}


.content-profile{
  text-align: center;
}

.profile-img img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
    
}
.profile-img{
 position:relative;
}


.check-profile img{
    width: 20px;
     height: 20px;
     position:absolute;
     bottom:0;
     right:1;

 }
<div class="profile-banner">
      <div class="content-profile">
        <div class="profile-img">
        <img src="https://www.digmefitness.com/files/members/000/005/687/1490956902_1ZR6E_Blank-Avatar-Image.png" alt="">
                <div class="check-profile">
         <div class="check-profile-position">
              <img src="http://image.prntscr.com/image/1336ad9d5388454f9b451914f4129c22.png" alt="">
          </div>
        </div>
        </div>

        <div class="profile-name-ml">
          <span>User Name</span>
        </div>
      </div>
    </div>

3
  • Hola, Jorge gracias por la respuesta, pero el bottom:0 hace que la imagen de check se vaya hasta abajo : prntscr.com/f1o9ni Commented el 28 abr. 2017 a las 0:42
  • si acomodaste el div check-profile dentro del div profile-img, y le diste la propiedad relative a .profile-img Commented el 28 abr. 2017 a las 1:00
  • Si, era eso jejeje gracias! Commented el 28 abr. 2017 a las 1:07
0

ESPERO TE SIRVA ES MUY SIMPLE PERO EFECTIVA!

<div align="center" style="background: blue;padding:40px;">
<img  src="http://lorempixel.com/100/100/" alt="imagen" style="border-radius:100%;">
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.