如何在網頁中間對齊文本區域-有解無憂

嗨，伙計們，我一直在試圖弄清楚如何將我的 textarea 放在網頁中間，然后坐在螢屏左側的其他 textarea 旁邊。代碼如下！如果我能找到兩種不同的方式，我將非常感激。

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>

uj5u.com熱心網友回復：

您還可以使用grid來獲取所需的布局。請參閱下面的片段：

body {
  background-color: #434343;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

textarea{
  width: max-content;
}

.leftField {
  grid-row: span 3;
}

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

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

更多關于grid 這里。

uj5u.com熱心網友回復：

我不會使用浮動來對齊您的內容，特別是如果您已經在使用 flex。只需將代碼嵌套在 a 中wrapper并定義高度和寬度。您可以display: flex;在該包裝上進行設定。我不會使用固定邊距來分隔您的彈性專案，因為它非常無回應。

只需更改justify-content: center;為一個justify-content: space-around;或justify-content: space-evenly;哪個基本上做同樣的事情來分隔你的彈性專案。

編輯?洗掉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>

uj5u.com熱心網友回復：

您可以在第一個文本欄位元素上設定浮動屬性。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432855.html

標籤：html css 弹性盒

上一篇：設定100%高度子部分

下一篇：標題的小頂部邊框，同時保持標題的高度