I’m having trouble figuring out how to perfectly align my text and image.
Examples:
Any help is appreciated!
.navbar .logo a {
color: #ececec;
font-size: 1.5rem;
font-weight: 700;
}
.logo img {
width: 30px;
}<div class="logo">
<img src="img/favicon/favicon.png" alt="">
<a href="#">LABFOLD</a>
</div>>Solution :
Use flex box to align them perfectly
.logo {
display: flex;
align-items: center;
justify-content: center;
}
.navbar .logo a {
color: #ececec;
font-size: 1.5rem;
font-weight: 700;
}
.logo img {
width: 30px;
}<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png" alt="">
<a href="#">LABFOLD</a>
</div>