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>