how to remove duplicate letters when using css with html?-CodePudding

I am newbie with html css and here is my problem.

I coded a very simple html css program.

I want to put the text in the center and make it to be horizontally. But it was vertical, as you can see in this code

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

In this code, I want it like this

GO TO NEXT APPROVAL OK TRY AGAIN

The text to be vertically lined up.

I know my question is very easy with you, but could you please spend a little bit time to fix it for me ? Thank you very much for your time.

CodePudding user response：

Here you go - flexbox for the rescue. Try to avoid position: absolute unless you want to have elements overlaying each other.

Also, I gave the .wrapper the width and height of the entire viewport, which may not be necessary in your case. It does need dimensions to center its child elements within.

if you want the text to be vertical just add flex-direction: column to the wrapper.

* {
    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 >
    <div >GO TO NEXT APPROVAL</div>
    <div >OK</div>
    <div >TRY AGAIN</div>
  </div>
</body>

</html>

CodePudding user response：

Wrap divs by .container. Then alinged that with position: absolute and left and 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 >
    <div >GO TO NEXT APPROVAL</div>
    <div >OK</div>
    <div >TRY AGAIN</div>
  </div>
</body>

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

CodePudding user response：

What your trying to do is stack vertically, So

Use align-items: stretch; and flex-direction: column;,
with display: flex;,
to the .wrapper class.

* {
  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 >
    <div >GO TO NEXT APPROVAL</div>
    <div >OK</div>
    <div >TRY AGAIN</div>
  </div>
</body>

</html>