Why cant I just use
margin-top:50%andmargin:bottom:50%on the classes.logoand.rightto align them verticallyAccording to what I've read
margin:bottom:50%andmargin-top:50%should automatically center vertically bothrightand.logoin their containerheaderbut rather they come to some random middle place of the page.
This is my main problem ( this weird margin behavior on window resize)
- If I use margin-top:x% and get them in vertically middle position of header then when I resize the window to small the LOGO shifts from being in middle of header to top.
html {
background-color: white
}
body {
width: 88.5%;
height: 1200px;
margin: 0 auto;
border: 2px solid black;
background-color: #161e2c;
}
.top-box {
margin: 0 auto;
width: 99.5%;
height: 153px;
background-color: #314e59;
border: 1px solid rgb(211, 41, 97);
box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a {
display: inline-block;
margin: 23px 0 0 5px;
padding: 5px 5px;
max-width: 400px;
color: white;
text-decoration: none;
font-size: 500%;
background-color: pink;
border: 2px solid black;
}
.right {
margin-top: 13px;
display: inline-block;
width: 600px;
background-color: pink;
border: 2px solid black;
float: right;
text-align: center;
color: white
}
ul {
display: inline-block;
list-style-type: none;
font-size: 35px;
width: 100%;
padding-left: 0;
}
li {
display: inline-block;
padding: 7px;
}<body>
<header class="top-box">
<a href="#" class="logo">Konoha</a>
<div class="right">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</header>
</body>right now I am using margin: (x) px that's why they stay in middle even if i make the window smaller
Aucun commentaire:
Enregistrer un commentaire