如何在 html 中垂直对齐 2 个分区

Question

现在我很难垂直对齐两个分区，像这样：

但它们并没有像那样对齐，而是像这样水平对齐：

这是我的代码：

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

body {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: absolute;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818;
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

h2,
h1 {
  margin: 0;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div>
    <h1 class='main'>Hello , I'm Saharsh.</h1>
    <h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1>
  </div>

  <div>
    <h1 class='subMain'>Another Division</h1>
  </div>
  <script src='Scripts/TypeDeleteText.js'>
  </script>
</body>

</html>

Answer 1

在您的 style.css 文件中使用这一行。 flex-direction: column;

Example Image

Answer 2

您的 body 处于弹性状态，将其放入网格或添加 flex-direction: 列；在你的 body 上。这是您在网格中的代码。

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

body {
  height: 90vh;
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: absolute;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818; 
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% { opacity: 0; }
}

h2, h1 {
  margin: 0;
}

<!DOCTYPE html>
<html lang='en'>
    <head>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body>
        <div>
            <h1 class='main'>Hello , I'm Saharsh.</h1>
            <h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1>
        </div>
        
        <div>
            <h1 class='subMain'>Another Division</h1>
        </div>
        <script src='Scripts/TypeDeleteText.js'>
        </script>
    </body>
</html>

Answer 3

Div 是一个块元素，因此它会占据页面的整个宽度，即使当您将它弯曲时，现在第二个 div 也有 space。只需给 div 一个宽度，例如 50%，并在 div 之间创建间隙，只需写 gap:10px;.

如何在 html 中垂直对齐 2 个分区

How to align 2 divisions vertically in html

html

javascript

css

fonts