Как выровнять по одной линии?

Question

[Mrako_bes]

Как выровнять текст и картинки, как показано на скрине?
Как нужно:

Что получается:

<nav>
	<div class="topnav">
		<a href="#">Home</a>
		<a href="#">About us</a>
		<a href="#">Services</a>
		<a href="#">Contact Us</a>
	</div>
</nav>

.topnav a {
	margin-right: 70px;
	text-align: right;
	color: #545454;
	font-size: 19px;
	font-family: "Sofia";
	font-weight: 100;
	padding-left: 25px;
}
.topnav a:first-child {
	background: url(../img/home.png) no-repeat;
}
.topnav a:nth-child(2) {
	background: url(../img/about_us.png) no-repeat;
}
.topnav a:nth-child(3) {
	background: url(../img/services.png) no-repeat;
}
.topnav a:nth-child(4) {
	background: url(../img/contact_us.png) no-repeat;
}

Comments

[Владислав Линник]

Зря так фоном делаешь картинки, в твоем случае попробуй поиграться с позиционированием фона

[Mrako_bes]

Владислав Линник, я альтернативы этому способу не знаю, что можно ещё использовать?

[Артур Карапетян]

Mrako_bes,

a::before {
content: "";
....
}

А лучше вставить в html тегом img

[Mrako_bes]

Артур, и правда, через img намного легче и удобнее

[alex-1917]

Mrako_bes, а теперь проверьте вот здесь https://developers.google.com/speed/pagespeed/insights/
только пакетики из самолета заранее приготовьте,чтоб вокруг чистоту сохранить...

делать всё - иконки-шконки-перепонки -отдельными картинками -тяжкое наследие криворуких ленив0задых гореверстаков
иконки надо загонять в спрайт, бэкграунд-ковер давно уже у всех на устах.

Answer 1

[Юпитер Макс]

Используй иконки как псевдоэлементы. before или after с абсолютным позиционированием

Answer 2

[Andrew Garfield]

В твоем случае через :before.


Но лучше меню делать через список.

Answer 3

[profesor08]

Установи картинке line-height: 100%, а самому блоку display: flex, align-items: center;