如何将文本区域的标签相对于该文本区域居中对齐？

Question

您好，我正在尝试将文本区域的标签对齐到文本区域的中心。

我的设计如下：

我的文本区域行数是“2”。我正在使用 bootstrap 列分隔符将列拆分为 4 和 8，因为我想要这样的设计。现在，我正在尝试将标签 Data Definition 分配得低一点，以便准确显示在中心，如下图突出显示的。

我的代码如下：

 <br />
         <div class="row" style="border:solid">
             <div class="col-sm-4" style="text-align:center;background-color:#3abaab;font-size:large;vertical-align: middle; ">Data Definition </div>
  <div class="col-sm-8"><textarea name="id" id="id" cols="45" rows="2">@Model.DD</textarea></div>
         </div>
             <br />

如何解决这个问题。请帮忙。

Answer 1

一个简单的方法就是让 div

[appropriate css selector for div containing "Data Definition"] {
  display: flex;
  align-items: center;
  /* if you want to horizontally center as well, then: */
  justify-content: center;
}

将它们垂直居中。

.title {
  width: 200px;
  height: 200px;

  text-align: center;
  background-color: #3abaab;
  font-size: large;
  vertical-align: middle;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="title">
  Data Definition
</div>

如何将文本区域的标签相对于该文本区域居中对齐？

How to Align Label of the text area in center with respect to that textarea?

html

css

textarea