在左上角对齐文本
[英]Align Text in Top Left
问题描述
我正在使用 fullPage.js，我想让一些文本位于顶部。 我希望margin-right和margin-top可以工作，我什至尝试过vertical-align 。 他们没有工作。
这是我的代码。
.s1a { background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg); background-size: cover; } .s1a h1 { text-align: left; margin-left: 2em; vertical-align: top; font-size: 4rem; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="fullPage"> <div class="section s1a"> <h1>At **Removed**, we truly believe that</h1> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> new fullpage('#fullPage', { autoScrolling: true }) </script> </body> </html>
3 个解决方案
解决方案1
0 2021-11-09 03:19:43
尝试
position: absolute; left: x%; top: y%;解决方案2
0 2021-11-09 04:56:31
在这种情况下，将文本向左浮动可能会有所帮助。
*{ margin=0; padding=0; } #fullPage { background: url('https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg'); background-size: cover; } #fullPage h1 { float : left; font-size: 2rem; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="fullPage"> <h1>At **Removed**, we truly believe that</h1> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> new fullpage('#fullPage', { autoScrolling: true }) </script> </body> </html>
解决方案3
0 2021-11-09 05:00:23
#Make element position absolute with top and left value#
.s1a { background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg); background-size: cover; } .s1a h1 { position: absolute; top: 0; left: 0; font-size: 4rem; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="fullPage"> <div class="section s1a"> <h1>At **Removed**, we truly believe that</h1> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> new fullpage('#fullPage', { autoScrolling: true }) </script> </body> </html>
文字左对齐问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.