Align Text in Top Left
Question
I'm working with fullPage.js and I wanted to make some text sit around the top. I expected margin-right and margin-top to work and I even tried vertical-align . They didn't work.
Here is my code.
.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 answers
solution1
0 2021-11-09 03:19:43
try
position: absolute; left: x%; top: y%;solution2
0 2021-11-09 04:56:31
Floating the text to left may be helpful in this case.
*{ 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>
solution3
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Text left align issue
Align text of textarea left
Top align text in flexbox
align text on the left and the right in Highcharts
Align Paper Icon and Text left?
Align pie chart to top-left of div?
different size divs align top left
CSS/JS: Align tiles left and top
Left align text but prefix with … if too long on left
Top align text inside a square
Related Tags