How to align an Textarea in the middle of the webpage

February 25, 2022

Hi Guys I’ve been trying to figure out how to sit my textarea in the middle of the webpage and sit next to my other textarea that’s on the left side of the screen. Code below! i would very much appreciate it, if I could get 2 different ways i could have approached this plz.

body {
  background-color: #434343;
}

#textFields {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
}

.center {
  margin: auto;
  display: block;
  text-align: center;
  margin-left: 550px;
}

<!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">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
  <textarea name="Buy" id="advertise" cols="30" rows="50"></textarea>

  <div id="textFields">
    <textarea name="" class="center" cols="30" rows="10"></textarea>
    <textarea name="" class="center" cols="30" rows="10"></textarea>
    <textarea name="" class="center" cols="30" rows="10"></textarea>
  </div>
</body>

</html>

>Solution :

I would not use floats to align your content, especially if you are already using flex. Just nest your code in a wrapper and define a height and width. You can set display: flex; on that wrapper. I wouldn’t use a fixed margin to space your flex-items as it is very unresponsive.

Just change justify-content: center; to either justify-content: space-around; or justify-content: space-evenly; which basically do the same thing to space your flex-items.

Edit ~ Removed justify-content: center; and added margin: 0 auto; to #textFields

body {
  background-color: #434343;
}

#textFields {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.center {
  display: block;
  text-align: center;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

<!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">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
<div class="wrapper">
  <textarea name="Buy" id="advertise" cols="30" rows="50"></textarea>

  <div id="textFields">
    <textarea name="" class="center" cols="30" rows="10"></textarea>
    <textarea name="" class="center" cols="30" rows="10"></textarea>
    <textarea name="" class="center" cols="30" rows="10"></textarea>
  </div>
</div>
</body>

</html>