Question

Uma página html possui uma div com id=’img-perfil’. Abaixo um span com o nome do usuário, de id=’name-user’. Eles elementos estão em uma div de classe container-user. Com base nisso, siga as instrução:

1 -Container-user deve ter height=200px e width: 100px, img-perfil deve ter height=50px e width: 50px e name-user deve possur width: 90%. Crie o css para centralizar todos os elementos;
2 - Coloque uma imagem no background de img-perfil
3 - O background de img-perfil deve preencher toda a div, aparecendo o rosto do usuário independentemente do tamanho da imagem passada. Você deve tornar a div img-perfil em um formato circular.
4 - O texto em name-user deve ser branco e com tamanho da fonte 14px;
5- Container-user deve ter background branco, borda de 1px cinza e pontas arredondadas;

Answer 1

Seguindo as instruções, teremos:

como elemento inline ou inline-* (texto ou link)

aqui o ideal é centralizar elementos inline horizontalmente em um elemento pai somente com:

CSS

.filhos-centralizados {

text-align: center;

}

*lembre-se de que  funcionar para elementos inline, inline-block, inline-table, inline-flex, dentre outros.

em seguida:

centralizar um elemento block definindo dessa forma, a sua margin-left e margin-right como auto

.centralizado {

margin: 0 auto;

}

Os elementos inline/texto podem estar centralizados verticalmente, uma vez que o espaçamento acima e abaixo deles é igual.

CSS

.link {

padding-top: 30px;

padding-bottom: 30px;

}