左上对齐文本答案

【问题标题】：Align Text in Top Left左上对齐文本
【发布时间】：2021-11-09 03:12:31
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript html css fullpage.js

【解决方案1】：

试试

    position: absolute;
    left: x%;
    top: y%;

其中 x 和 y 是从左到上的 %

【讨论】：

【解决方案2】：

在这种情况下，将文本向左浮动可能会有所帮助。

*{
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】：

#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>

【讨论】：