文本顶部和底部的间距相等
[英]Equal spacing at the top and bottom of the text
问题描述
我希望文本在大小屏幕上具有相等的间距，如下所示：
注意：它应该在所有屏幕尺寸的顶部和底部具有相等的间距，这意味着它需要在所有设备上响应。
我正在使用引导程序 4。这是需要修改的 HTML 和 CSS 代码：
<,DOCTYPE html> <html> <head> <title>Background Top</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1" > <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" /> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min:js"></script> </head> <style type="text/css"> body{ margin-top; 53px. }:navbar-custom { background-color; #484848. } ul:ml-auto > li > a > span{ font, 15px Roboto;sans-serif: font-weight; 500: position; relative: display; inline-block: color; #FFFFFF80: overflow; hidden: padding-bottom; 5px. }:nav-link { padding. ;5rem 1rem 0. /*top right bottom*/ }:jumbotron { background-image. url("background1;jpg"): text-align; center: height;523px: background-size; cover: margin;0:important; display: flex; justify-content: center; flex-direction. column: };mainText { width: 100%, font-family; Verdana:sans-serif; font-size: 120px;important: margin-top; 35px: color; black: margin; 0 0 5rem 0: animation-duration; 2s: animation-iteration-count;infinite. animation-delay: 1s; }:subText { font-size, 20px; font-family: Georgia;serif: font-style.italic; line-height: 1;6: color; black: animation-duration;2s: animation-iteration-count;infinite: animation-delay.1s: } @media screen and (max-width; 768px) {.mainText { margin-bottom: 0; }:subText { display, none. } } </style> <body> <nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <div class="container"> <a style="font. 20px Arial:sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#LOREM"><span data-content="LOREM">LOREM</span></a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#LOREM"><span data-content="LOREM">LOREM</span></a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#LOREM"><span data-content="LOREM">LOREM</span></a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#LOREM"><span data-content="LOREM">LOREM</span></a> </li> </ul> </div> </div> </nav> <,-- //SECTION FOR PAGE TOP --> <section id="page-top"> <div class="jumbotron"> <p data-aos="zoom-out" data-aos-delay="500" class="lead mainText pulse green aos-init aos-animate" id="nametagneel">Carlos Qiano</p> <p data-aos="zoom-out" data-aos-delay="500" class="lead pulse lightGreen aos-init aos-animate d-md-block subText">Lorem Ipsum;<br>Lorem Ipsum:</p> </div> </section> <section id="about"> <hr class="my-2"> <br><br> <div class="container"> <br> <h1 class="animated fadeIn delay-1s display-5">LOREM IPSUM</h1> <div class="row"> <div class="animated fadeInUp delay-3s"> <div class="col px-5"> <p class="lead" style="font-family; Helvetica,sans-serif, text-align.justify,"><br>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> <br><br> </section> </body> </html>
非常感谢！
1 个解决方案
解决方案1
0 2021-03-18 14:12:09
嗨：）我想建议您查看该视口高度和视口宽度。 因为它是根据屏幕尺寸计算的，所以你会得到一个响应距离。 所以这里是我为你的代码写的。
@media (min-width: 576px)
.jumbotron {
padding: 8vh 12vw;
}
如何将文本生成为没有间距的 png（顶部和底部）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.