Question

我是初学者，我想做以下事情，但我不知道如何正确地做。

无论屏幕扩展如何，我都需要使用第二个文本和一个按钮（具有文本区域类的块）使文本居中。

通常，我希望带有第二个文本和按钮（文本区域块）的文本始终位于同一位置，而不管方向（纵向/横向）如何。有没有简单的方法可以做到这一点？

*{
  margin: 0;
  padding: 0;
}
body{
  min-height: 300vh;
  background-color: #1D1D1D;
  z-index: -2;
}
.section{
  position: relative;
  height: 100vh;
}
.text-area{
  position: relative;
}
#index-title-main{
  color: #fff;
  font-size: 55px;
  height: 150px;
}
.index-form-link{
  display: block;
  max-width: 250px;
  margin-top: 50px;
  padding: 10px;
  color: #35E6BA;
  font-size: 25px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  border: 1px solid #35E6BA;
  -webkit-animation: fadein 5s;
  -moz-animation: fadein 5s;
  -ms-animation: fadein 5s;
  -o-animation: fadein 5s;
  animation: fadein 5s;
}
.index-form-link:hover{
  background-color: #35E6BA;
  color: #000;
  font-weight: bold;
}
.index-backdev{
  color: #555;
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

<section class="section">
  <div class="text-area">
    <div id="index-title-main">Hi!<br>I am someone, and I am doing something.</div>
    <a class="index-img-content-link" href="/works.html"><img class="index-img-content" src="img/t-index.png" alt=""></a>
    <h5 class="index-backdev">Second text</h5>
    <a class="index-form-link" href="">Btn text</a>
  </div>
</section>

Answer 1

尝试将您的代码更改为此行 #index-title-main 在您的 css 文件中

#index-title-main{
  color: #fff;
  font-size: 4em;
  display: block;
  overflow: auto;
}

将 3 元素块与页面中心的左侧对齐

1 个答案: