dl、dt 和 dd 元素的 CSS，使它们显示为居中并作为键排列：值

Question

I'd like to have key\/values listed like this:

Username: myhandle
Password: lalalalalala
     Key: somevalue

Answer 1

I'm not completely sure from your question what you're looking for but is close to this or this ? Here's the CSS I used:

body {
    display: table;
    margin: 0 auto;
}
dt {
    text-align: right;
    font-weight: bold;
}
dt:after {
    content: ":";
}
dd {
    text-align: left;
    padding-left: 1em;
}
dl {
    display: table-row;
}
dt, dd {
    display: table-cell;
}

A couple of notes: this depends on having a parent element you can apply display: table to, it doesn't have to be body but that was the only one available in your JSFiddle. The other thing that will break it is if you have any markup where there are multiple dd elements for one dt .

Answer 2

Another way to do it is to use flex<\/code> :

dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0;
  word-break: break-word;
}

dt {
  width: 50%;
  text-align: right;
}

dt:after {
  content: ":";
}

dd {
  box-sizing: border-box;
  width: 50%;
  padding-left: 1rem;
}