How to align an Textarea in the middle of the webpage-CodePudding

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=""  cols="30" rows="10"></textarea>
    <textarea name=""  cols="30" rows="10"></textarea>
    <textarea name=""  cols="30" rows="10"></textarea>
  </div>
</body>

</html>

CodePudding user response：

You can also use grid to get the layout that you want. See the snippet below:

body {
  background-color: #434343;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

textarea{
  width: max-content;
}

.leftField {
  grid-row: span 3;
}

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

<!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 ></textarea>
  <div id="textFields">
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
  </div>
</body>

</html>

More on grid here.

CodePudding user response：

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 per OP questions in comments.

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 >
  <textarea name="Buy" id="advertise" cols="30" rows="50"></textarea>

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

</html>

CodePudding user response：

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>