Estoy utilizando ionic y tengo un problema con el avatar. Deseo centrar el avatar en la pantalla pero no puedo.
<ion-avatar class="align-text-center">
<img src="./assets/galeria/iconousuario.jpg" style="text-align: center">
</ion-avatar>
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadEstoy utilizando ionic y tengo un problema con el avatar. Deseo centrar el avatar en la pantalla pero no puedo.
<ion-avatar class="align-text-center">
<img src="./assets/galeria/iconousuario.jpg" style="text-align: center">
</ion-avatar>
Me parece que no puedes aplicar la propiedad y valor text-align: center;
a la etiqueta img
ya que esta es un elemento in-line
y dicha propiedad y valor de acuerdo con la Mozilla Developer solo funciona para elementos en bloque o una table-cell box.
Entonces dado que tienes una etiqueta ion-avatar
pudieras hacer lo siguiente:
Aplica el text-align: center;
a la antes mencionada ya que es la que contiene a la imagen embebida quedando así:
<style>
ion-avatar{
text-align: center;
}
</style>
Asumiendo que dicha etiqueta se comporte como bloque
O bien puedes decantarte por el uso de flexbox
indicando que la etiqueta contenedora que es ion-avatar
sea flex
y haga flexibles a los elementos dentro de si, en este caso la etiqueta img
quedando así:
<style>
ion-avatar{
display: flex;
justify-content: center;
}
</style>
El código anterior a la etiqueta que contiene el elemento hará que todos aquellos dentro de, se alinen al centro.
En dado caso de que la etiqueta ion-avatar
no se comporte como bloque, pudieras agregar un div
que contenga a la img
y con las mismas propuestas que ya te dí; esta vez solo deberías aplicar los estilos de cada propuesta pero a la etiqueta div
Prueba con esto.
<div style="display: flex; justify-content: center;">
<ion-avatar>
<img src="./assets/galeria/iconousuario.jpg">
</ion-avatar>
</div>