Question

我有一个简单的<dl>元素，其中包含一些子<dt>和<dd>个标记。在小提琴中你会看到正常的布局，但对于移动设备，我试图让元素看起来像是text-align: center。它们应该显示2-a-side但总体而言应该看起来居中。

我已尝试将子元素设置为父display: inline-block text-align: center，但我不知道推送＆＃34;每对中的第一个到新线上。希望我已经很好地解释了这一点......

请看看小提琴并提出任何建议，谢谢。

https://jsfiddle.net/4ptdLg92/

Answer 1

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

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

现在，您可以在text-align: center部分设置@media：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

目前还不完全清楚你的目标是什么，但我认为这就是你想要的目标：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

首先可能值得一试：

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

如果无法做到这一点，可能的修复方法可能是：

data want01 want02;
set have;
if a then output want01;
if b then output want02;
run;

data want01;
var=var1;
output;
var=var2;
output;
run;

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

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

3 个答案: