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

Hi I am trying to align the label of the text area to be centralized for the textarea.

My Design as follows:

My text area rows is "2". I am using bootstrap col separator to split the column into 4 and 8, as I want design like this. Now I am trying to assign the label Data Definition to be bit lower to display exactly at the center as shown in image below with highlighted.

My code as follows:

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

How to fix this. Kindly help.

CodePudding user response：

An always simple way is to make the 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;
}

to vertically center them.

.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 >
  Data Definition
</div>