【问题标题】:Can't Center Ordered List Title无法将有序列表标题居中
【发布时间】:2018-04-13 04:45:49
【问题描述】:

我有一个带有 H3 和段落的有序列表。

我不知道如何使标题居中。

.list {    
  list-style: decimal; 
  list-style-position: inside; 
  margin-left: 0px; 
  display: inline-block;
}

.list li h3 {    
  display: inline-block;
  margin: 0 auto;
  text-align: center;   
}
<ol class="list" reversed="reversed">
  <li>
    <h3>Fourth Prime</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus feugiat at metus ut ultricies. Aliquam lacinia libero sit amet ex accumsan, sit amet imperdiet sapien vehicula. In hac habitasse platea.</p>

  </li>
</ol>

【问题讨论】:

  • 你想要h3居中还是h3和数字
  • 最好只是文字而不是数字

标签: html css html-lists centering


【解决方案1】:

如果您希望 H3 居中查看显示 css 选项,目前display: inline-block 不允许 H3 标签居中。

.list li h3 {
   display: inline-block; // block or list-item
   margin: 0 auto;
   text-align: center;
}

【讨论】:

  • 好吧,这行得通,但我只是想知道你能不能告诉我为什么 inline-block 行不通?我要问的原因是 display: block 它将 h3 设置在自己的行上,所以我不得不将它提高到与负边距匹配的数字。
  • 这是因为内联块元素可以有宽度和高度。因此,居中对齐的另一种方法是保留您的原始 (.list li h3) 类并为其添加 100% 的宽度。正如您最初拥有的那样,宽度是

    .

    的宽度
  • 看这个帖子有详细解释:stackoverflow.com/questions/9189810/…
猜你喜欢
  • 1970-01-01
  • 2017-12-09
  • 2016-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-08
  • 1970-01-01
  • 2012-11-14
相关资源
最近更新 更多