Issue
I am building my own personal web page, and while doing the "header" I wasn't able to align my "a" tags to the logo... I've been trying everything, but there are no solutions.
This is my code. If I am wrong in some part, please explain me to not commit the same mistake.
HTML
`
<div class="mainBox">
<!--Logo-->
<div class="navBox">
<a href="web.url.com"><img src="Images/Logo3Final.png" alt="logo" id="logo"></a>
</div>
<div class="navBox">
<a href="#about">/*About Me*/</a>
</div>
<div class="navBox">
<a href="#contact">/*Contact*/</a>
</div>
<div class="navBox">
<a href="#expertise">/*Expertise*/</a>
</div>
<div class="navBox">
<a href="#projects">/*Projects*/</a>
</div>
</div>
`
CSS
`#logo{
max-width: 200px;
max-height: 220px;
right: -100px;
}
/*MENU*/
.mainBox{
position: relative;
display: flex;
width: 95%;
height: 25vh;
justify-content: space-evenly;
align-items: center;
}
.navBox{
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
width: 20%;
height: 20vh;
text-align: center;
top: 50%;
background: transparent;
}
.navBox a:hover{
padding-top: 50%;
background: transparent;
color: var(--text-color);
text-decoration: none;
}
a:visited, a:active, a:link{
text-decoration: none;
color: var(--text-color);
}
.navBox a{
vertical-align: middle;
color: var(--text-color);
padding-top: 0.5rem;
text-align: initial;
}
I try changing position values, I tried giving padding-top, top, margin, nesting into antoher div. But I can not achieve what I will like to be.
Here is a ScreenShot of my page.
Solution
You can align .navBox to the center, like this:
.navBox{
/* ... */
display: flex;
align-items: center;
}
or you can remove the height you've specified for .navBox which I think is redundant. It will look like this:
#logo{
max-width: 200px;
max-height: 220px;
}
.mainBox{
position: relative;
display: flex;
width: 95%;
height: 25vh;
justify-content: space-evenly;
align-items: center;
}
.navBox{
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
width: 20%;
text-align: center;
}
<div class="mainBox">
<!--Logo-->
<div class="navBox">
<a href="web.url.com"><img src="https://placekitten.com/96/140" alt="logo" id="logo"></a>
</div>
<div class="navBox">
<a href="#about">/*About Me*/</a>
</div>
<div class="navBox">
<a href="#contact">/*Contact*/</a>
</div>
<div class="navBox">
<a href="#expertise">/*Expertise*/</a>
</div>
<div class="navBox">
<a href="#projects">/*Projects*/</a>
</div>
</div>
Answered By - BehRouz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.