將css與html一起使用時如何洗掉重復的字母？-有解無憂

我是 html css 的新手，這是我的問題。

我撰寫了一個非常簡單的 html css 程式。

我想將文本放在中心并使其水平。但它是垂直的，正如您在這段代碼中看到的那樣

https:// codepen.io/anhbui2904/pen/ExoxoNN

在這段代碼中，我想要這樣

轉到下一個批準 OK 再試一次

要垂直排列的文本。

我知道我的問題對你來說很容易，但你能花點時間幫我解決一下嗎？非常感謝您的寶貴時間。

uj5u.com熱心網友回復：

給你 - 用于救援的 flexbox。盡量避免position: absolute，除非你想讓元素相互重疊。

另外，我給出了.wrapper整個視口的寬度和高度，這在您的情況下可能不是必需的。它確實需要尺寸來將其子元素居中。

如果您希望文本是垂直的，只需添加flex-direction: column到包裝器中。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.btn {
 margin: 10px 0;
}

<!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="./assets/css/styles.css">
</head>

<body>
 <div class="wrapper">
    <div class="btn">GO TO NEXT APPROVAL</div>
    <div class="btn">OK</div>
    <div class="btn">TRY AGAIN</div>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

將 div 包裝為.container. 然后將其與position: absoluteandleft和相結合right：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.btn {
  margin: 0;
  text-align: center;
}

.container {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <div class="container">
    <div class="btn">GO TO NEXT APPROVAL</div>
    <div class="btn">OK</div>
    <div class="btn">TRY AGAIN</div>
  </div>
</body>

https://codepen.io/ebrahimi73/pen/WNdNJwm?editors=0100

uj5u.com熱心網友回復：

你想做的是stack垂直的，所以

使用align-items: stretch;和flex-direction: column;,
與display: flex;,
到.wrapper班級。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: stretch;
  flex-direction: column;
}

.btn {
  margin: 0 10px;
}

<!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="./assets/css/styles.css">
</head>

<body>
  <div class="wrapper">
    <div class="btn">GO TO NEXT APPROVAL</div>
    <div class="btn">OK</div>
    <div class="btn">TRY AGAIN</div>
  </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442474.html

標籤：html css

上一篇：移動設備上消失的文本漸變疊加

下一篇：如何將HTML元素的“元資料”傳輸到函式？/通過jinja2創建的HTML元素的單個ID