how to center this? n00b question
Hi, I am a newbie to this, honestly,
and i've come across this issue in css, seen in the image, where the icon isn't properly aligned with the text. How can I bring the icon font down to the center and raise the text font up?
and i've come across this issue in css, seen in the image, where the icon isn't properly aligned with the text. How can I bring the icon font down to the center and raise the text font up?
<div>
<div class="sidenav">
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
home
</i>
<div class="sidenav-text">
Home
</div>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
favorite
</i>
<label class="sidenav-text">
Favorite
</label>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
star
</i>
<label class="sidenav-text">
Star
</label>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
bolt
</i>
<label class="sidenav-text">
Bolt
</label>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
abc
</i>
<label class="sidenav-text">
abc
</label>
</div>
</div>
</div><div>
<div class="sidenav">
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
home
</i>
<div class="sidenav-text">
Home
</div>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
favorite
</i>
<label class="sidenav-text">
Favorite
</label>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
star
</i>
<label class="sidenav-text">
Star
</label>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
bolt
</i>
<label class="sidenav-text">
Bolt
</label>
</div>
<div class="sidenav-item-container">
<i class="material-symbols-outlined sidenav-icon">
abc
</i>
<label class="sidenav-text">
abc
</label>
</div>
</div>
</div><style scoped>
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&symbols=menu,home,favorite,star,bolt,abc");
.sidenav {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
width: 12.5%;
max-width: 300px;
height: 100%;
gap: 1rem;
margin-top: 1.5rem;
}
.sidenav .sidenav-item-container {
display: inline;
align-items: center;
justify-items: center;
padding-left: .3rem;
.sidenav-text {
display: inline;
margin-left: 10px;
}
}
</style><style scoped>
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&symbols=menu,home,favorite,star,bolt,abc");
.sidenav {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
width: 12.5%;
max-width: 300px;
height: 100%;
gap: 1rem;
margin-top: 1.5rem;
}
.sidenav .sidenav-item-container {
display: inline;
align-items: center;
justify-items: center;
padding-left: .3rem;
.sidenav-text {
display: inline;
margin-left: 10px;
}
}
</style>
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
