Страницы

Поиск по вопросам

суббота, 11 января 2020 г.

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

#html #css


Всем привет!

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

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

            


Здесь картинки одинаковые, так как 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; }

Комментариев нет:

Отправить комментарий