如何将文本区域的标签与该文本方面的中心保持一致？

Question

嗨，我试图使文本区域的标签与文本区域集中。

我的设计如下：

我的文本区域行是“ 2”。我正在使用bootstrap col分离器将列分为4和8，因为我想要这样的设计。现在，我试图分配标签数据定义要较低，以完全显示在中心，如下图所示，突出显示了。

我的代码如下：

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