Question

我有一个定价表模板，其中我删除了一个列表元素，将其从3个元素减少到2个元素。我尝试将剩余的2个列表元素与父元素<ul>和<div>居中，但无法使其正常工作。

我已经尝试了以下但没有成功，所以我正在寻找一些指导

div {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

以及

.cd-pricing-list {
  text-align:center;
  margin: 2em 0 0;
}
.cd-pricing-list > li {
  text-align:center;
  position: relative;
  margin-bottom: 1em;
}

我目前的例子是https://jsfiddle.net/5d0gec7u/1/

源代码来自此网站https://codyhouse.co/demo/pricing-tables/index.html

Answer 1

Flex很好，但这是一个更兼容的解决方案：

将text-align: center添加到包含<ul>。
从列表项中删除float: left。
将display: inline-block; vertical-align: top;添加到这些列表项。

通常你也会添加text-align: left来“重置”列表本身的对齐方式，但由于内容也是居中的，所以不需要在这里。

Answer 2

添加

.cd-pricing-list{
 display: flex;
 justify-content: center;
}

见updated fiddle

水平居中列出项目

2 个答案: