CODEWITHSUNDEEP
htmlcssvertical-alignment
Rodrigo
Rodrigo

Reputation: 5129

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

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:

css1

And I wanted this:

css2

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?

Upvotes: 6

Views: 10094

Answers (3)

GreatBlakes
GreatBlakes

Reputation: 4151

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

Upvotes: 0

Peter Girnus
Peter Girnus

Reputation: 2739

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.

Upvotes: 5

Md Shariful Islam
Md Shariful Islam

Reputation: 157

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

Upvotes: -2

Related Questions