水平居中列表項目

Question

我有一個定價表模板，我已經刪除了一個將其從3個元素減少到2個元素的列表元素。我試圖用父元素<ul>和<div>居中剩下的2個列表元素，但無法使其工作。

我已經嘗試沒有成功下列所以我在尋找一些指導

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

Jus不要再增加

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

看到這裏updated fiddle

Answer 2

Flex是很好的，但這裏有一個更加兼容的解決方案：

1. 添加text-align: center到含<ul>。
2. 從列表項中刪除float: left。
3. 將display: inline-block; vertical-align: top;添加到這些列表項。

通常你也想加入到text-align: left「復位」從列表本身的定位，但由於內容也集中就沒有必要在這裏。