Форум

MOT · #1 (**permalink**) 08.04.2020, 10:53

Не успели соскучиться по мне, как подкатил новый вопрос по 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

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>

Форум

Справочник

Discord чат

Курсы javascript