Mahmoud Santos
Published in : 2022-02-27

How to align an Textarea in the middle of the webpage

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

 

Comments

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

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to horizontally align to the centre a li inside an ul?
Publish date: 2022-03-04 | Comments: 2

Tag: HTML & CSS

Is OOCSS still a good CSS architecture in 2022?
Publish date: 2022-02-08 | Comments: 2

Tag: HTML & CSS

What is the need for using (for) attr in the label of an input tag?
Publish date: 2022-02-11 | Comments: 2

Tag: HTML & CSS

Logo shrinks when resizing the browser
Publish date: 2022-02-10 | Comments: 2

Tag: HTML & CSS

Searching for a better way to use abstracts in Dart SASS
Publish date: 2022-02-10 | Comments: 0

Tag: HTML & CSS

Multiple classes in :not() function in CSS
Publish date: 2022-07-25 | Comments: 2

Tag: HTML & CSS

Invalid CSS after : expected expression was - SASS error
Publish date: 2022-02-13 | Comments: 1

Tag: HTML & CSS

Sticky header goes behind the Images
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS