Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2020, 10:53
MOT MOT вне форума
Аспирант
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 52

line-height - муки с css
Не успели соскучиться по мне, как подкатил новый вопрос по css:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: cursive;
width: 100%;
}
.header_image > img {
width: 100%;
}
.header_image > a > div {
position: absolute;
text-align: center;
}
.link1 {
right: 15%;
top: 100px;
background: linear-gradient(to right bottom, white, grey);
width: 200px;
height: 200px;
border-radius: 100px;
line-height: 200px;
}
</style>
<body>
<div class="header_image">
<img src="https://www.zastavki.com/pictures/1920x1200/2012/Cities__034084_.jpg">
<a href="#"><div class="link1"><center>Очень преочень ну очень длинный текст</center></div></a>
</div>
</body>
</html>

Проблема: текст отображается не так как хотелось бы
____________
Лучше спросить глупость и побыть 5 минут дураком, чем остаться им на всю жизнь
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2020, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

MOT,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: cursive;
width: 100%;
position: relative;
}
.header_image > img {

width: 100%;
}
.header_image > div {
position: absolute;
text-align: center;
vertical-align: middle;
}
.link1 {
right: 15%;
top: 100px;
background: linear-gradient(to right bottom, white, grey);
width: 200px;
height: 200px;
border-radius: 100px;

}
.header_image > div > a{
   line-height: 10px;
   display: inline-block;
   position: relative;
   top: 75px;
   line-height: 30px;
}

</style>
</head>
<body>
<div class="header_image">
<img src="https://www.zastavki.com/pictures/1920x1200/2012/Cities__034084_.jpg">
<div class="link1"><a href="#">Очень преочень ну очень длинный текст</a></div>
</div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
css animation height ekkl-82 (X)HTML/CSS 17 30.10.2015 10:22
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 20:11
Нуждаюсь в вашей помощи JavaScript Chris_Phils Работа 12 18.08.2015 16:36
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58
Не удалось открыть узел. Операция прервана! Nevermore Internet Explorer 3 19.01.2010 14:34