Got some problems with CSS Margins.
1. Why cant i just use margin-top:50% and margin:bottom:50% on the classes .logo and .right to align them verically
According to what i've read margin:bottom:50% and margin-top:50% should automatically center vertically both.right and .logoin their container header but rather they come to some random middle place of the page
2.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 headerto 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 used margin: (x) px thats why they stay in middle even if i make the window smaller
Aucun commentaire:
Enregistrer un commentaire