CODEWITHSUNDEEP
htmlcss
anhbui4122
anhbui4122

Reputation: 23

how to remove duplicate letters when using css with html?

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.

Upvotes: 0

Views: 87

Answers (3)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

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 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

Upvotes: 1

Tomer Almog
Tomer Almog

Reputation: 3868

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 class="wrapper">
    <div class="btn">GO TO NEXT APPROVAL</div>
    <div class="btn">OK</div>
    <div class="btn">TRY AGAIN</div>
  </div>
</body>

</html>

Upvotes: 1

redoc
redoc

Reputation: 2445

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 class="wrapper">
    <div class="btn">GO TO NEXT APPROVAL</div>
    <div class="btn">OK</div>
    <div class="btn">TRY AGAIN</div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions