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

Question

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

我尝试将子元素设置为 display: inline-block 并在父元素上使用 text-align: center，但我不知道如何将每对中的第一个“推”到新行上。希望我已经解释得足够好......

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

https://jsfiddle.net/4ptdLg92/

Answer 1

可能值得先检查一下：

https://stackoverflow.com/a/10998064/4351155

如果这是不可能的，可能的解决方法是：

dt{
    text-align:right;
}
dd{
    text-align:left;
}
dt, dd{
     background:red;
     float:left;
     display:inline-block;
     width:50%;
}

这里的例子： https://jsfiddle.net/4ptdLg92/

Answer 2

我删除了所有浮动并添加了

.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/

Answer 3

不完全清楚你想要什么，但我认为这就是你想要的样子：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
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-bottom: 2px;
  float: left;
  width: 50%;
}
.data_table dt {
  clear: both;
  text-align: right;
}

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