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

Posted 2023-03-05

【中文标题】居中对齐 <dl> 及其子元素

【英文标题】：Center aligning <dl> and its child elements

【发布时间】：2015-11-11 15:06:24

【问题描述】：

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

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

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

https://jsfiddle.net/4ptdLg92/

【问题讨论】：

一张所需结果的图片会很有帮助，-jsfiddle.net/4ptdLg92/1

【参考方案1】：

可能值得先检查一下：

https://***.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/

【参考方案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/

【讨论】：

查看效果以全屏模式打开sn-p并更改浏览器的窗口大小

漂亮，谢谢。我搞砸了 :before 和 :after 并且无法得到我想要的东西。感谢您花时间回答我的问题。

【参考方案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>

【讨论】：

感谢您抽出宝贵的时间来编写，“Cheslab”在您发布之前就已经到达那里，但我很欣赏代码。