Meu site html, css e bootstrap

Bootstrap

HTML5

CSS3

Front-end

27/08/2019

estou começando a fazer um site e não estou conseguindo centralizar a imagem, alguém pode me ajudar, se tiver algo errado, inútil que possa tirar ou com algum problema pode falar também
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Romulo Lessa</title>
</head>
<body>
<div class="painel">
<!-- texto principal nível 1 -->
<img id="imagem" src="img/codigo_de_programacao_fundo.jpg" alt="imagem de codigo para fundo">
<h1>Romulo Lessa</h1>
<img id="perfil" src="https://scontent.fsdu8-1.fna.fbcdn.net/v/t1.0-9/14731123_1225965720760309_5976373550744053717_n.jpg?_nc_cat=111&_nc_oc=AQnEWUWfwHqL3mSFoav9ARMdhVu7d8Y6Oz0YLcEZKbwg42tcCJj6_kQ9ZYODOmyOfoMXqh9fUriuJAzjY-L92nPV&_nc_ht=scontent.fsdu8-1.fna&oh=f34a910ae0ee6ce4cc64c8ed5d2da45d&oe=5E045686" alt="foto do perfil">
<p>Desenvolvedor front-end</p>
</div>
<div id="menu">
<!--menu lateral -->
<a href="#Sobre_min">Sobre min|</a>
<a href="#Conhecimento">Conhecimento |</a>
<a href="#Projetos">Projetos</a>
</div>

<div id="sobre">
<!-- texto principal nível 2 -->
<h2 id="Sobre_min">Sobre min</h2>

<!--paragrafo-->
<p>Me chamo Romulo de Almeida Lessa, sou morador do Rio de Janeiro no endereço
avenida lúcio costa 3200-casa28- barra da tijuca, estudante do ensino superior da
faculdade universidade do grande rio- UNIGRANRIO estou atualmente no 3 período com
previsão de formatura no 2 semestre de 2020, tenho conhecimento intermediário em
html, css, javascript e java, iniciante nos ES6, git, sass e react</p>
</div>
<div class="conhecimento">

<!--texto principal nível 2 -->
<h2 id="Conhecimento">Conhecimento</h2>
<!--Lista de 8 itens -->
<ul>


<li>Html
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
</li><!--barra de porcentagem-->
<li>Css
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 40%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
</li><!--barra de porcentagem-->
<li>Javascript
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 40%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
</li><!--barra de porcentagem-->
<li>Java
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>
</li><!--barra de porcentagem-->
<li>ES6
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>
</li><!--barra de porcentagem-->
<li>Git
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
</li><!--barra de porcentagem-->
<li>Sass
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</li><!--barra de porcentagem-->
<li>React
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 10%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</li><!--barra de porcentagem-->
</ul>

</div>
<div id="projetos">
<!-- texto principal nível 2-->
<h2 id="Projetos">Projetos</h2>

<!-- texto principal nível 3-->
<h3>Concluídos</h3>
<p>Semana Omnistack em breve link </p>

<!-- texto principal nível 2-->
<h3>Andamento</h3>
<p>Meu site/ portifolio em breve link</p>
<p>Pwa Abito21 em breve link</p>

<!-- texto principal nível 2-->
<h3>Futuros</h3>
<p>Pwa Ravenna</p>
</div>
</body>
</html>
body{
    color: black;
    background-color: rgba(221, 212, 212, 0.877);
    padding: 10px;
}
.painel #perfil{
    border-radius: 50%;
    width: 50%;
}
.painel #imagem{
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
    -webkit-filter: blur(4px);

}
.painel p, h1, #perfil{
    color: rgb(248, 228, 228);
    text-align: center;
    position: sticky;
}
.painel{
    color: azure;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
#menu{
    text-align: center;
    margin-top: 25px;
}
#menu a{
    text-decoration: none;
    color: black;
}
#menu a:hover{
    color: gray;
}
.nav{
    text-align: center;
}
.conhecimento li{
    list-style-type: none;
}
Romulo Lessa

Romulo Lessa

Curtidas 0

Respostas

Romulo Lessa

Romulo Lessa

27/08/2019

ja botei assim e nao funcionou
.painel #perfil{
border-radius: 50%;
text-align: center;
width: 50%;
}
GOSTEI 0
Wilson Santos

Wilson Santos

27/08/2019

Ja faz bastante tempo sua postagem aqui no forum, mas só agora vi ... e seu problema se resolve utilizando da ferramenta flexbox

Retire essa parte do seu CSS:
/* .painel p, h1, #perfil {
    color: rgb(248, 228, 228);
    text-align: center;
    background-position: center;
} */


E adicione esse trecho de codigo
.painel {
    display: flex;
    flex-direction: column;
    align-items: center;
}
GOSTEI 0
POSTAR