Boa tarde
A minha dúvida era a seguinte, estou a fazer um cabeçalho e é do tipo flex. Acontece que queria duas coisas. A primeira é diminuir o tamanho da primeira div, mas não consigo pois o conteúdo nunca fica centrado. Queria saber se existe alguma altura mínima necessária pois não estou a entender o porque de não ficar. E a segunda div não aceita que o contudo fique mais para a direita. Posso estar a fazer alguma coisa de errado. se alguém puder dar uma vista de olhos agradecia.
Muito obrigado
Arquivo HTML
Código :
Pagina CSS
Código :
A minha dúvida era a seguinte, estou a fazer um cabeçalho e é do tipo flex. Acontece que queria duas coisas. A primeira é diminuir o tamanho da primeira div, mas não consigo pois o conteúdo nunca fica centrado. Queria saber se existe alguma altura mínima necessária pois não estou a entender o porque de não ficar. E a segunda div não aceita que o contudo fique mais para a direita. Posso estar a fazer alguma coisa de errado. se alguém puder dar uma vista de olhos agradecia.
Muito obrigado
Arquivo HTML
Código :
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Saber Poupar</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<div class="logotipo">
<div class="aro">
<div class="Logo"><h2>SP</h2></div>
<div class= "Logo2" ><h5>Saber Poupar.pt</h5></div>
</div>
</div>
</body>
</html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Saber Poupar</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<div class="logotipo">
<div class="aro">
<div class="Logo"><h2>SP</h2></div>
<div class= "Logo2" ><h5>Saber Poupar.pt</h5></div>
</div>
</div>
</body>
</html>
Pagina CSS
Código :
/* indica que a altura do corpo é o tamanho todo*/
.body{
height: 100%;
}
/* Descricao da div que tem os dois logotipos*/
.logotipo{
/* Propriedades para ser tipo flex*/
display: flex; /* indica que e o tipo flex*/
flex-direction: row; /* indica que disposicao dos elementos e em linha*/
justify-content: left; /* alinha os elementos na linha a esquerda*/
align-items: center; /* alinha os elementos na a altura no centro da div */
height: 300px;
border: solid 2px #ff0000;
}
/* Propriedades flex da div do aro do logotipo*/
.logotipo > .aro{
flex: 1; /* indica que e para distribuir o espaco igual para todos*/
display: flex; /* indica que e o tipo flex*/
flex-direction: row; /* indica que disposicao dos elementos e em linha*/
border-radius: 5px ;
height:65px;
max-width: 150px;
border: solid 2px #0072c6;
align-items: center; /* alinha os elementos na a altura no centro da div */
}
.Logo{
background-color: #0072c6;
color: #fff;
border-radius: 1px ;
}
.Logo2{
color: #0072c6;
align-self: center;
align-content: center;
}
.body{
height: 100%;
}
/* Descricao da div que tem os dois logotipos*/
.logotipo{
/* Propriedades para ser tipo flex*/
display: flex; /* indica que e o tipo flex*/
flex-direction: row; /* indica que disposicao dos elementos e em linha*/
justify-content: left; /* alinha os elementos na linha a esquerda*/
align-items: center; /* alinha os elementos na a altura no centro da div */
height: 300px;
border: solid 2px #ff0000;
}
/* Propriedades flex da div do aro do logotipo*/
.logotipo > .aro{
flex: 1; /* indica que e para distribuir o espaco igual para todos*/
display: flex; /* indica que e o tipo flex*/
flex-direction: row; /* indica que disposicao dos elementos e em linha*/
border-radius: 5px ;
height:65px;
max-width: 150px;
border: solid 2px #0072c6;
align-items: center; /* alinha os elementos na a altura no centro da div */
}
.Logo{
background-color: #0072c6;
color: #fff;
border-radius: 1px ;
}
.Logo2{
color: #0072c6;
align-self: center;
align-content: center;
}