I just can't vertically center this text inside my div (red background), I've tried everything but nothing is working, please help! I can't even get my text inside the div whithout using margins/padding for some reason. I've tried using div, span, p and h1 for the text but nothing worked =(
THIS IS MY CODE:
<div >
<div >
<a href="#" >arrow_upward</a>
<a href="#">Voltar ao topo</a>
</div>
<div >
<a href="https://github.com/maruan-achkar/javascript_exercicios" target="_blank" >//GITHUB LINK</a>
</div>
<div >
<div >
<p >MENU</p>
</div>
<div >
<a href="#trocarvariaveis">// Trocar Variaveis<br></a>
<a href="#celsiusparafarenheit">// Celsius para Farenheit<br></a>
<a href="#farenheitparacelsius">// Farenheit para Celsius<br></a>
<a href="#areacirculo">// Area Circulo<br></a>
<a href="#parouimpar">// Par ou Impar<br></a>
<a href="#intervalo">// Intervalo entre numeros<br></a>
<a href="#intervalovetor">// Intervalo entre maior e menor de vetor<br></a>
<a href="#maiormenor">// Maior e menor numero<br></a>
<a href="#paisagemouretrato">// Paisagem ou retrato<br></a>
<a href="#fizzbuzz">// Fizz ou Buzz<br></a>
<a href="#stringobject">// String do objeto<br></a>
<a href="#parimparlimite">// Par ou impar ate limite<br></a>
</div>
</div>
</div>
</header>
--------------------------------------------CSS--------------------------------------------
.dropdown {
float: left;
background-color: #F6F7EB;
height: 100%;
width: 100px;
}
.dropdown-title-container{
background-color: #DC3318;
height: 100%;
display: flex;
justify-content: center;
}
.dropdown-title{
font-family: Arial;
font-weight: bolder;
font-size: 1.75em;
line-height: 100%;
}
.dropdown-content {
display: none;
position: absolute;
top: 48px;
background-color: #F6F7EB;
padding-right: 15px;
outline: solid black 3px;
box-shadow: 0px 10px 15px black;
border-radius: 0.1vw;
font-size: 0.8em;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdowna{
color: black;
font-size: 1.75em;
margin-left: 2vw;
text-decoration: none;
}```.sticky{
position: fixed;
top: 0;
width: 100%;
height: 45px;
background-color: #DC3318;
box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.65);
}
.headerdiv{
background-color: greenyellow;
height: 100%;
width: 100%;
}
.backtotop{
font-weight: bolder;
font-size: 0.75em;
margin-right: 0;
height: 100%;
width: 160px;
float: right;
display: flex;
align-items: center;
}
.backtotoptext{
margin: auto;
text-decoration: none;
color: black;
font-size: 1.55em;
margin-right: 12px;
}
.material-symbols-outlined{
text-decoration: none;
margin-right: -30px;
margin-bottom: 3px;
color: black;
}
.backtotop:hover .backtotoptext{
color: rgb(0, 132, 255);
}
.backtotop:hover .material-symbols-outlined{
color: rgb(0, 132, 255);
}
.githubcontainer{
width: 200px;
height: 100%;
float: right;
margin-right: 40px;
display: flex;
align-items: center;
}
.githublink{
color: black;
margin: auto;
font-size: 1.35em;
text-decoration: none;
}
.githublink:hover{
text-decoration: underline;
}
CodePudding user response:
Just add align-items:center;
to .dropdown-title-container
, and the text will be aligned vertically.
CodePudding user response:
I tested your code. However, it doesn't show same screen as the image you posted,
so I can not say exactly. have you try 'align-items: center;'
.dropdown-title-container{
background-color: #DC3318;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
CodePudding user response:
I believe you are trying to do something simple much harder than needed.
in your CSS file try to put a tag align-items: center
inside .dropdown-title-container
.
like this:
.dropdown {
float: left;
background-color: #F6F7EB;
height: 100%;
width: 100px;
}
.dropdown-title-container{
background-color: #DC3318;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-title{
font-family: Arial;
font-weight: bolder;
font-size: 1.75em;
line-height: 100%;
}
.dropdown-content {
display: none;
position: absolute;
top: 48px;
background-color: #F6F7EB;
padding-right: 15px;
outline: solid black 3px;
box-shadow: 0px 10px 15px black;
border-radius: 0.1vw;
font-size: 0.8em;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdowna{
color: black;
font-size: 1.75em;
margin-left: 2vw;
text-decoration: none;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
height: 45px;
background-color: #DC3318;
box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.65);
}
.headerdiv{
background-color: greenyellow;
height: 100%;
width: 100%;
}
.backtotop{
font-weight: bolder;
font-size: 0.75em;
margin-right: 0;
height: 100%;
width: 160px;
float: right;
display: flex;
align-items: center;
}
.backtotoptext{
margin: auto;
text-decoration: none;
color: black;
font-size: 1.55em;
margin-right: 12px;
}
.material-symbols-outlined{
text-decoration: none;
margin-right: -30px;
margin-bottom: 3px;
color: black;
}
.backtotop:hover .backtotoptext{
color: rgb(0, 132, 255);
}
.backtotop:hover .material-symbols-outlined{
color: rgb(0, 132, 255);
}
.githubcontainer{
width: 200px;
height: 100%;
float: right;
margin-right: 40px;
display: flex;
align-items: center;
}
.githublink{
color: black;
margin: auto;
font-size: 1.35em;
text-decoration: none;
}
.githublink:hover{
text-decoration: underline;
}
<header >
<div >
<div >
<a href="#">arrow_upward</a>
<a href="#">Voltar ao topo</a>
</div>
<div >
<a
href="https://github.com/maruan-achkar/javascript_exercicios"
target="_blank"
>//GITHUB LINK</a
>
</div>
<div >
<div >
<p >MENU</p>
</div>
<div >
<a href="#trocarvariaveis"
>// Trocar Variaveis<br
/></a>
<a href="#celsiusparafarenheit"
>// Celsius para Farenheit<br
/></a>
<a href="#farenheitparacelsius"
>// Farenheit para Celsius<br
/></a>
<a href="#areacirculo">// Area Circulo<br /></a>
<a href="#parouimpar">// Par ou Impar<br /></a>
<a href="#intervalo"
>// Intervalo entre numeros<br
/></a>
<a href="#intervalovetor"
>// Intervalo entre maior e menor de vetor<br
/></a>
<a href="#maiormenor"
>// Maior e menor numero<br
/></a>
<a href="#paisagemouretrato"
>// Paisagem ou retrato<br
/></a>
<a href="#fizzbuzz">// Fizz ou Buzz<br /></a>
<a href="#stringobject"
>// String do objeto<br
/></a>
<a href="#parimparlimite"
>// Par ou impar ate limite<br
/></a>
</div>
</div>
</div>
</header>
:D
This link should help you in the future.