Home>

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 corrected and cannot be corrected.
(By the way, dt is left-justified and dd is right-justified.)

Thanks for your patience.

The source is as follows.

<! DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no">
    <meta name = "format-detection" content = "telephone = no">
    <style>
    / * Reset and Base * /
    html {overflow-y: scroll;}
    body {font-family: Meiryo, 'MS PGothic', arial, sans-serif;}
    dl, dt, dd {margin: 0;padding: 0;line-height: 1.6;}
    pre {
        font-family: Meiryo, 'MS PGothic', arial, sans-serif;border: 0;font-size: 1.4rem;line-height: 1.6;background: #fff;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    .cf: before {content: '';display: table;}
    .cf: after {content: '';display: table;clear: both;}
    / * Style * /
    .category {width: 100%;margin: 0 0 20px 0;padding: 10px 20px;border-top: 3px # 333 solid;border-bottom: 1px # 333 solid;
    .category dt {float: left;font-size: 2.0rem;}
    .category dd {float: right;}
    </style>
</head>
<body>

<dl>
    <dt>Title</dt>
    <dd>text text text text text text text</dd>
</dl>

</body>
</html>
  • Answer # 1

    I think Flexbox is easier than float

    dl {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

  • Answer # 2

    Organize requirements.
    If you just want to center the top and bottom while placing the two elements on the left and right, you don't need to follow the latest specifications.

    The description using flexbox can be expressed more simply, but if you don't know how to use flexbox, just place the elements as shown in the figure above. ? I think I was able to come up with a description

    <! DOCTYPE html>
    <html lang = "en">
    <head>
        <meta charset = "UTF-8">
    </head>
    <body>
      <dl>
          <dt>Title</dt><!-
          -><dd>text text</dd>
      </dl>
    </body>
    </html>
    dl {
      display: table-cell;/* (additional) so that vertical-align: middle;can be used * /
      padding: 10px 0;/* 10px margin above and below * /
    }
    dt, dd {/ * Arrange with half the width of the parent element * /
      display: inline-block;
      width: 50%;
      vertical-align: middle;/* (additional) vertical center alignment * /
    }
    dt {
      text-align: left;/* Left alignment * /
    }
    dd {
      text-align: right;/* Right justification * /
    }

    This will serve the purpose well, but even if you look at CSS alone, it's a little harder to touch than the flexbox description
    Actually, the idea of ​​the above code is not just to arrange the elements ofwidth: 50%:side by side.

    Ifdt, dd {display: inline-block;}is removed from the description above, the elements will not be arranged side by side. This is the behavior of what was formerly called "block elements". The old "block elements" are always arranged vertically, and specifications such asdtandddalso fall under this result. Become.

    Also, in the HTML above,<! ---->(commented out) betweendtanddd) Between them, but if this is not present, a newline character (\ n<dt>and<dd>code>* Normally not displayed), something like margin is created, and the total width is "50% + line feed character width + 50%", so the elements will not fit and the column drop will occur. Occur and cannot be placed side-by-side
    (Addition: There is also a method to omit the closing tag of dt and dd to erase the line feed character)

    If you explain up to this point, I think flexbox's "umami" will be transmitted

    In the example of

    x_x, the description to be moved to the left and right isjustify-content: space-between;, and the vertical alignment isalign-items: center;The code is easy to understand.

    How to handle flexbox is easy to understand here. Please refer

    Detailed explanation of how to use CSS Flexbox properties