How to align an Textarea in the middle of the webpage

Question

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>

Yong · Answer 1 · 2022-02-27T23:33:13.840

1

You can use flexbox to get the layout that you want. And to center the three other textareas without affecting the center layout of the #textfield then you can use positioning. You can refer to this post as well. See the snippet below:

body {
  background-color: #434343;
  justify-content: center;
  display: flex;
  height: 100vh;
  position: relative;
}

.leftField{
  position: absolute;
  height: 100%;
  left: 0;
}

#textFields {
  display: flex;
  flex-direction: column;
}

#textFields>textarea {
  flex: 1;
}

<!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 class="leftField"></textarea>
  <div id="textFields">
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
  </div>
</body>
</html>

More on flexbox and positions here and here respectively.

edited Feb 27 '22 at 23:33

answered Feb 25 '22 at 03:29

Yong

1,622
1
4
29

Thanks bro! my knowledge on flex box isn't great! – Hanif KillMonger Gibson Feb 25 '22 at 03:34
You can check the link that I included above to learn more about it! :) – Yong Feb 25 '22 at 03:35
I think the OP has accepted the answer, if he had something more to add, he can do so himself in the comments. – Yong Feb 25 '22 at 03:45
@カメロン Uhh... ok? – Yong Feb 25 '22 at 03:58
@HanifKillMongerGibson if you want to really center the `#texfield` in your webpage without it being affected by the other `textarea` to the right, then you can use `position`ings. I've edited the snippet above. It might be what you need. – Yong Feb 27 '22 at 23:35

Kameron · Accepted Answer · 2022-02-25T04:06:09.890

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>

okay, i understand what you did! But I want the larger textbox to stay on the left side of the screen. While the other 3 are in the middle. — Hanif KillMonger Gibson, Feb 25 '22 at 03:41
@HanifKillMongerGibson easy fix. Remove `justify-content: center;` and add `margin: 0 auto;` to `#textFields`. The 0 means 0 margin on top and bottom and auto left and right. Hence, why it is centered now. — Kameron, Feb 25 '22 at 03:45

score -1 · Answer 3 · answered Feb 25 '22 at 03:31

-1

You can set a floating attribute on the first text field element.

<div style="float:left">
  <textarea name="Buy" id="advertise" cols="30" rows="50"></textarea>
</div>

answered Feb 25 '22 at 03:31

杨阳洋

59
2

wow I didn't think to use float left. – Hanif KillMonger Gibson Feb 25 '22 at 03:37
2

you shouldn't be using floats in the year 2022 – Pixelomo Feb 25 '22 at 03:52
@Pixelomo why is that? if you don't mind me asking? – Hanif KillMonger Gibson Feb 25 '22 at 04:06
1

@HanifKillMongerGibson Before flex-box and grid, float was the go-to. But with the power of flex and grid (if done correctly), there is no need. You can read more here: [Is CSS float deprecated? | CSS-Tricks - CSS-Tricks](https://css-tricks.com/is-css-float-deprecated/) – Kameron Feb 25 '22 at 04:08
@HanifKillMongerGibson float can often lead to cross-browser bugs, flex-box is the bullet-proof, modern solution – Pixelomo Feb 25 '22 at 08:01
1

@Pixelomo Thanks for sharing your knowledge. I appreciate it a lot! – Hanif KillMonger Gibson Feb 25 '22 at 14:00

How to align an Textarea in the middle of the webpage

3 Answers3