Icons are not centered in half screen
I have tried everything I know, but I'm a little rusty
codepen: https://codepen.io/Zrizzy/pen/NWeQgGv
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>you suck if u read this</title>
</head>
<body>
<ul class="sidebar">
<li class="icon">
<span class="material-symbols-outlined">
add
</span>
</li>
<li class="icon">
<span class="material-symbols-outlined">
add
</span>
</li>
</ul>
</body>
</html>
CSS:
ul{
height: 100vh;
position: fixed;
background-color: #d13d3d;
border-color: #00ADB5;
border: solid;
border-width: 4px;
border-radius: 5px;
width: 5vw;
display: flex;
justify-content: center;
}
li{
list-style-type: none;
text-align: center;
}
(the colors are temperery)
4 Replies
Do you just want to add
padding-inline: 3rem (or however much you want) to your ul?
padding-inline: 0 will center them without making the element any biggerIf you want it to wrap, use flex-wrap: wrap on the flex container
I did both and it worked after I removed justify content, thank you so much, and sorry for the late response I was needed to do something urgently
