0

Tengo una card que tengo que colocar el avatar en el centro pero en medio de la tarjeta (foto 1), pero no logro centrar el avatar y me queda en el lado izquierdo(foto 2).

Foto 1

introducir la descripción de la imagen aquí

Foto 2

introducir la descripción de la imagen aquí

El html lo tengo dentro de una tarjeta mat-card.

    <div fxLayout="column">
    <mat-toolbar>Clientes Potenciales</mat-toolbar>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center">
        <mat-card *ngFor="let current of clients" fxFlex="20">
            <div  mat-card-avatar fxLayoutAlign="center">
                <img mat-card-image src="{{current.avatar}}" class="circulo">
            </div>
            <div fxLayout="row" fxLayoutAlign="space-between center">
                <div class="icon" fxLayoutAlign="start center">
                    <span>{{current.companyName}}</span>
                </div>
                <div class="person">
                    <span>{{current.trackManager.fullName}}</span>
                </div>
            </div>
            <mat-card-content fxLayout="row" fxLayoutAlign="space-around center">
                <span>Registrado: </span>
                <span>{{current.createdAt | date :'dd/MM/YY'}}</span>
            </mat-card-content>
        </mat-card>
    </div>
</div>

CSS

     .circulo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    top: -35px;
}
2
  • despues de top: -35px; agregale un **margin-left:50%; ** puede funcionar
    – EvilFearzZ
    Commented el 18 ene. 2023 a las 21:42
  • el problema de agregar el margin es que luego si hago mas pequeña la pantalla la posición no queda en el centro Commented el 18 ene. 2023 a las 23:21

1 respuesta 1

3

Hay muchas formas de resolver eso. Una seria usando displey:flex en el contenedor (mat-card) y luego darle un margin:auto el item (el circulo).

.mat-card{
    display: flex;
    background-color: rgb(54, 92, 205);
    margin: 100px auto;
    width: 250px;
    height: 100px;
}

.circulo{
    margin: auto;
    position: relative;
    background: rgb(138, 138, 138);
    width:  80px;
    height: 80px;
    border-radius: 50%;
    top: -50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <div class="mat-card">
           <div class="circulo"></div>
    </div>
</body>
</html>

Porfa dale Manito arriba! Así me sube la reputación y puedo seguir ayudando al resto, ya que al ser nuevo por acá, me limitan con las respuestas que puedo dar!

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.