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>
Проблема: текст отображается не так как хотелось бы ____________ :blink: Лучше спросить глупость и побыть 5 минут дураком, чем остаться им на всю жизнь |
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>
|
| Часовой пояс GMT +3, время: 22:52. |