user image

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

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

Tag: HTML & CSS

How do custamize my button to give it a bubble look using CSS?
Publish date: 2022-03-04 | Comments: 0

Tag: HTML & CSS

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

Tag: HTML & CSS

Can't move the background-image code from CSS file to HTML file.
Publish date: 2022-02-13 | Comments: 2

Tag: HTML & CSS

Flex Box last column break to the next row
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

Do I have to upload the sass files or just the CSS file?
Publish date: 2022-02-11 | Comments: 1

Tag: HTML & CSS

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

Tag: HTML & CSS

min-height is not working on td or th
Publish date: 2021-10-20 | Comments: 1

Tag: HTML & CSS