Всем привет!
Начал потихоньку разбираться с HTML и CSS сразу подкатила небольшая работка. Так как я только учусь всех нюансов не знаю. Имеется меню в котором текст должен быть написан на звездочках, звездочки(они разного цвета) являются картинками и требуется поместить ссылку в них. Уже пытался это сделать с помощью position: relative и absolute. Выравнивал текст по первой ссылке и получалось так, что 1 ссылка становилась ровно в центр, а остальные 4 съезжали влево с помощью padding исправить это не удавалось, так как кол-во букв разное и все равно в какую-то сторону ссылки съезжали.
Кусочек кода HTML:
<nav>
<li><img src="img/star1.png" alt=""><a href="#">Avaleht</a></li>
<li><img src="img/star1.png" alt=""><a href="#">Broneeri</a></li>
<li><img src="img/star1.png" alt=""><a href="#">Reeglid</a></li>
<li><img src="img/star1.png" alt=""><a href="#">Hinnad</a></li>
<li><img src="img/star1.png" alt=""><a href="#">Galerii</a></li>
</nav>
Здесь картинки одинаковые, так как 5 с разными цветами прикладывать я думаю не имеет смысла.
CSS:
nav {
float: right;
}
nav li {
float: left;
display: block;
position: relative;
}
nav img {
height: 150px;
width: 150px;
}
nav li a {
position: absolute;
top: 50px;
right: 15px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-shadow: 5px 6px 10px #000000;
font-size: 27px;
font-family: "Roboto", sans-serif;
}
Может это у меня руки не из того места растут, но вроде я делаю все правильно. Возможно это можно выровнять через child, но я уверен есть более простой способ.
У меня получается вот такая вот фигня:
P.S. каждая ссылка должна быть в центре звезды.