Question

我正在尝试创建一个简单的网站来提高我在HTML和CSS语言方面的技能，但我不知道如何将此文字放在中间，请检查下面的图片

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.orange {
  width: 50%;
  height: 100%;
  background-color: #f5a130;
  background-size: cover;
  float: left;
}

.black {
  width: 50%;
  height: 100%;
  background-color: #383838;
  background-size: cover;
  float: right;
}

.title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #454;
  text-align: center;
  letter-spacing: 20px;
}

<body>

  <div class="orange"></div>

  <div class="black"></div>

  <h1 class="title">TEST WEBSITE</h1>

</body>

我尝试使用text-align，但是到底部了

Answer 1

您应该使用相对和绝对位置，这样您就可以控制它。.title { 位置：相对；底部：50％;}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.orange {
  width: 50%;
  height: 100%;
  background-color: #f5a130;
  background-size: cover;
  float: left;
}

.black {
  width: 50%;
  height: 100%;
  background-color: #383838;
  background-size: cover;
  float: right;
}

.title {
position:relative;
bottom:50%;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #454;
  text-align: center;
  letter-spacing: 20px;
}

<body>

  <div class="orange"></div>

  <div class="black"></div>

  <h1 class="title">TEST WEBSITE</h1>

</body>

如何将文字放在中间

1 个答案: