在左上角對齊文本
[英]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.