Loading Content...
© 2023 Copyrights reserved for web-brackets.com
Mahmoud Santos
27 Feb 2022
HTML & CSS
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>
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>