'How to align an Textarea in the middle of the webpage

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


Solution 1:[1]

You can use flexbox to get the layout that you want. And to center the three other textareas without affecting the center layout of the #textfield then you can use positioning. You can refer to this post as well. See the snippet below:

body {
  background-color: #434343;
  justify-content: center;
  display: flex;
  height: 100vh;
  position: relative;
}

.leftField{
  position: absolute;
  height: 100%;
  left: 0;
}

#textFields {
  display: flex;
  flex-direction: column;
}

#textFields>textarea {
  flex: 1;
}
<!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 class="leftField"></textarea>
  <div id="textFields">
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
  </div>
</body>
</html>

More on flexbox and positions here and here respectively.

Solution 2:[2]

You can set a floating attribute on the first text field element.

<div style="float:left">
  <textarea name="Buy" id="advertise" cols="30" rows="50"></textarea>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ???

Related Questions