html - 居中对齐 <dl> 及其子元素

Question

我有一个简单的 <dl>元素与一些 child <dt>和 <dd>标签。在 Fiddle 中你会看到正常的布局，但对于移动设备我试图让元素看起来像它们有 text-align: center。在他们。他们应该显示 2-a-side 但总体上应该看起来居中。

我试过将子元素设置为 display: inline-block与 text-align: center在 parent 身上，但我不知道将每对中的第一对“推”到新行上的方法。希望我已经解释得够清楚了……

请查看 Fiddle 并提出任何建议，谢谢。

https://jsfiddle.net/4ptdLg92/

Answer 1

我删除了所有 float 并添加了

.data_table dd:after {
  content: '';
  display: block;
}

现在你可以在@media部分设置text-align: center:

body {
    text-align: center;
}
.data_table {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    background: #efefef;
    padding: 10px;
    width: 300px;
}
.data_table dt, .data_table dd {
    margin: 0;
    margin-bottom: 2px;
    display: inline;
}
.data_table dt {
    padding-right: 8px;
}
.data_table dd:after {
    content: '';
    display: block;
}
@media (max-width: 600px){
    .data_table {
        text-align: center;
    }
}

<dl class="data_table">
    <dt>One:</dt>
    <dd>Value 1</dd>
    <dt>Two:</dt>
    <dd>Value 2</dd>
    <dt>Three:</dt>
    <dd>Value 3</dd>
    <dt>Four:</dt>
    <dd>Value 4</dd>
</dl>

或https://jsfiddle.net/4ptdLg92/2/