Как выровнять изображение по тексту? [дубликат] ⇐ CSS

[Anonymous]

Я создаю веб-сайт для класса и пытаюсь создать панель навигации. Я хочу, чтобы это выглядело так, созданное в Adobe XD. Я хочу, чтобы логотип клубники был выровнен по тексту и чтобы все эти элементы были выровнены вместе. Думаю, я очень близок к желаемому результату, но по какой-то причине логотип выглядит следующим образом:


Вот код, который я работает:

Код: Выделить всё

HTML, body {
margin: 0px;
padding: 0px;
border: 0px;
}

body {
font-family: "urbane-rounded", sans-serif;
font-weight: 500;
font-style: normal;
font-color: #6A281F;
}

a {
color: #F14271;
}

/*Ask about rem or pixels*/

.desktop-nav {
background-color:white;
filter:drop-shadow(0 0 0.30rem grey);
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}

nav a {
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
}

nav ul li {
display: inline-block;
justify-content: space-between;
list-style: none;
}

.logo {
display: inline-block;
vertical-align: top;
width: 10.75rem;
height: 6.594rem;

}

.search-icon {
filter: invert(36%) sepia(99%) saturate(2047%) hue-rotate(320deg) brightness(97%) contrast(94%);
width: 1rem;
height: 1rem;
}

Код: Выделить всё

[*]

The Strawberry Chateau





[list]
[url=#]
[img]img/logo-pink.svg[/img]
[/url]
[url=#]Home[/url]
[*][url=#]Merch[/url]
[*][url=#]Contact Us[/url]
[*][url=#]About[/url]
[*][url=#]
[img]img/search.svg[/img]
[/url]
[*][url=#]Order Now![/url]
[/list]



[url=#]
[img]img/logo-pink.svg[/img]
[/url]
[list]
[*][url=#]Home[/url]
[*][url=#]Merch[/url]
[*][url=#]Contact Us[/url]
[*][url=#]About[/url]
[*][url=#]
[img]img/search.svg[/img]
[/url]
[*][url=#]Order Now![/url]
[/list]



[img]/img/hero.png[/img]


Welcome to the chateau!
We hope you enjoy your stay!


[img]/img/order-pickup-button.png[/img]
[url=#]Order Pick Up[/url]

[img]/img/ delivery-button.png[/img]
[url=#]Order Delivery[/url]

[img]/img/rewards-button.png[/img]
[url=#]Special Deals[/url]






Who are we?
Nestled in the heart of City, State, The Strawberry Chateau is committed to delivering quality and artisan coffees and treats.   With a specialty in strawberries, The Chateau strives to ensure you feel right at home. We are more than just a coffee shop; we are also a community of coffee and strawberry aficionados.

[img]img/barista.png[/img]







[img]img/spring-savings.png[/img]

Spring Savings
Have a cup of strawberry infused coffee, on us.
Available once a week for the entire Spring season.
[url=#]ORDER ONLINE[/url]






[img]img/coffee-events.png[/img]

Chateau Events
Enjoy live music and other fun activities during your stay at the Chateau!
[url=#]VIEW SCHEDULE[/url]




Order a Treat
[url=#]Drinks[/url]
[url=#]Bakery[/url]
[url=#]Sale[/url]


[img]img/strawberry-latte.png[/img]
Strawberry Latte
Indulge in a ltte made with velvety steamed milk and infused organic strawberries.

200 calories
$3.99

-
1
+

[url=#]Home[/url]

[url=#]Merch[/url]

[url=#]Contact Us[/url]

[url=#]About[/url]

[url=#]Order Now[/url]

Contact

Phone:  (123)-456-7890

[img]img/facebook-footer.png[/img]

[img]img/logo-white.svg[/img]
[img]/img/copyright.svg[/img]
2024 Strawberry Chateau, City, State

Я попробовал вертикальное выравнивание: по центру и вертикальное выравнивание : сверху. Top перемещает изображение вверх, а middle ничего не делает.
Спасибо за помощь и время.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ge-to-text