How to vertical align dt tags in relation to its dd tags?

dl> <dt> <dd bootstrap
dl-horizontal
styling description lists css
dt css
styled dl
html dl columns
html definition list horizontal
css definition list

I have this html:

<dl>
    <dt><label for='txaText'>Text</label></dt>
    <dd><textarea id='txaText'></textarea></dd>
</dl>

and this css:

dt {
  float: left;
  text-align: right;
  width: 30%;
  padding-right:5px;
}
dd {
  width: 70%;
  margin: 0;
}

But I get this:

And I wanted this:

How can I achieve this vertical alignment of the dt tag in relation to its respective dd tag? Can I do this without horrible hacks like creating divs or specifying the height in pixels for each label?

I think I came up with a solution that you may like, you can set your elements to display:table-cell and vertical-align:middle to align them.

CSS:

dl{
   border: 1px solid red;
}

dt {
  display:table-cell;
  vertical-align:middle;
  width: 30%;
  padding-right:5px;
}
dd {
  display:table-cell;
  vertical-align:middle;
  width: 70%;
  margin: 0;
}

Updated CODEPEN DEMO for you.

html, Created side by side dt and dd. I'd like dt and dd to be centered in the upper and lower lines. Only dd has been correct. The <dd> tag is used to describe a term/name in a description list. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

I just came across this question and wanted to include a flexbox answer for anyone else that finds this. Flexbox makes this task pretty trivial which is great for developers!

dl {
  display: flex;
  align-items: center;
}

HTML DOM Style verticalAlign Property, Raises or lower an element in a percent of the "line-height" property. Negative values are allowed. baseline, Align the baseline of the element with the baseline � In fact, by using HTML dl, dt, dd tags, you will save on writing more codes and add more semantic value to the content. Whereas table are best use for tabular data, and should not be use in listing data, web form or web layout.

You can try this code.

html code:

<dl>
    <dt><label for='txaText'><br>Text</label></dt>
    <dd><textarea id='txaText'></textarea></dd>
</dl>

and this css code:

dt {
  float: left;
  text-align: right;
  width: 30%;
  padding-right:5px;
}
dd {
  width: 70%;
  margin: 0;
}

HTML dl tag, Definition and Usage. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each� Definition and Usage. The vertical-align property sets the vertical alignment of an element.

Definition Lists, An alternative format places the term left aligned in a wide margin and the <DL > <LH>List Header</LH> <DT>Term 1<dd>This is the definition of the first term. The definition list element can take the COMPACT attribute, which suggests that ways to increase the compactness of lists: reduced vertical interitem spacing,� The basic tag is written like this <dd></dd> with the description being inserted between the opening and closing tags. The element (as well as the <dt> element) is nested inside the <dl> element. Example. Here are two examples of <dd> usage. Example 1: Contains a list of terms and their definitions. Example 2: Here, some terms have more than

Creating Fully Responsive Table Designs, Previously I have demonstrated a responsive strategy for tables. In this case, < dt> tags correspond to table header cells, and <dd> elements to <td> 's. I will use display: table and related properties to achieve that: display: block; float: left; clear: left; } dl.definition-table dt img { vertical-align: middle; } }. The vertical-align property in CSS controls how elements set next to each other on a line are lined up.. img { vertical-align: middle; } In order for this to work, the elements need to be set along a baseline.

<td>: The Table Data Cell element, Use this attribute only with the <th> element to define the row or column for which it is a header. valign Obsolete since HTML5: This attribute� vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.

Comments
  • I have dozens of pages with dozens of dt/dd pairs in each one. I just can't be typing the height in pixels for every pair! As I said, this is a "horrible hack". I would have to readjust everything if I change the default font, for instance, or the default textarea height...
  • It's not if it's calculated in relation to it's parent, but there is a wrap way you can aslo do it, which I updated the answer.
  • Sorry, but your second solution has TWO things that I wanted to avoid.
  • If there's no direct way to vertical align a dt tag, I prefer to leave it without vertical alignment, instead of creating thousands of divs... But thanks for trying.
  • Sorry, I'm trying to come up with a solution that works for you.
  • Use a <BR> is not actually a solution, since different controls have different heights, so the number of <BR> would be variable. Also, this destroys completely the very idea of what "vertical align" means.