Поместить текст в картинку HTML/CSS

#html #css

Всем привет!

Начал потихоньку разбираться с HTML и CSS сразу подкатила небольшая работка. Так
как я только учусь всех нюансов не знаю. Имеется меню в котором текст должен быть написан
на звездочках, звездочки(они разного цвета) являются картинками и требуется поместить
ссылку в них. Уже пытался это сделать с помощью position: relative и absolute. Выравнивал
текст по первой ссылке и получалось так, что 1 ссылка становилась ровно в центр, а
остальные 4 съезжали влево с помощью padding исправить это не удавалось, так как кол-во
букв разное и все равно в какую-то сторону ссылки съезжали.

Кусочек кода HTML:

            

                
Avaleht
                
Broneeri
                
Reeglid
                
Hinnad
                
Galerii
            


Здесь картинки одинаковые, так как 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. каждая ссылка должна быть в центре звезды.
    

Ответы

Ответ 1

img {
  width: 100px;
  height: 100px;
  float: left;
}

a {
  display: inline-block;
  position: absolute;
  top: 40px;
  left: 25px;
}

li {
  display: inline-block;
  position: relative;
}







  

    
Avaleht
    
Broneeri
    
Reeglid
    
Hinnad
    
Galerii
    
Galerii
    
Galerii