Mahmoud Santos
Published in : 2022-02-27
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>
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Eslam Zedan Date : 2022-02-27
Best answers
8
Best answers
8
I would not use floats to align your content, especially if you are already using flex. Just nest your code in a
wrapperand define a height and width. You can setdisplay: 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 eitherjustify-content: space-around;orjustify-content: space-evenly;which basically do the same thing to space your flex-items.Edit ~ Removed
justify-content: center;and addedmargin: 0 auto;to#textFieldsper OP questions in comments.