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>

Comments

Eslam Zedan

27 Feb 2022

Best Answer

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

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>