如何在网页中间对齐文本区域

Question

大家好，我一直在想办法让我的文本区域位于网页中间，并与屏幕左侧的其他文本区域相邻。代码如下！我将非常感激，如果我能得到 2 种不同的方式，我可以接近这个 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>

Answer 1

您可以使用 flexbox 来获得您想要的布局。并在不影响 #textfield 的中心布局的情况下将其他三个 textarea 居中，然后您可以使用定位。你也可以参考这个。请参阅下面的代码段：

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>

更多关于 flexbox 和 positions here and here。

Answer 2

您可以在第一个文本字段元素上设置浮动属性。

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

Answer 3

我不会使用浮动来对齐您的内容，尤其是当您已经在使用 flex 时。只需将您的代码嵌套在 wrapper 中并定义高度和宽度。您可以在该包装器上设置 display: flex;。我不会对 space 你的 flex-items 使用固定边距，因为它非常没有响应。

只需将 justify-content: center; 更改为 justify-content: space-around; 或 justify-content: space-evenly;，这基本上对 space 您的 flex-items.

做同样的事情

编辑 ~ 删除了 justify-content: center; 并将 margin: 0 auto; 添加到 #textFields 每个 OP 问题在评论中。

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>

如何在网页中间对齐文本区域

How to align an Textarea in the middle of the webpage

html

css

flexbox