居中一個無序列表

有一個以h2爲中心的圖像，並希望它下面的列表也居中。一直在掙扎了一個多小時，似乎沒有得到它的任何地方。有什麼建議麼？居中一個無序列表

.images { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 33%; 
 
    /* all ements align to the largest element within the div */ 
 
    vertical-align: top; 
 
} 
 

 
.images ol { 
 
    width: 70%; 
 
} 
 

 
.images ol li { 
 
    line-height: 1.2em; 
 
    border: 0; 
 
}

<div class="images"> 
 
    <h3>Panacotta Vanilla</h3> 
 
    <img src="photo1.png.png"> 
 
    <p>recipe ingridients</p> 
 
    <ol> 
 
    <li>Macro free Ranged Chicken</li> 
 
    <li>Cover chicken in almond meal</li> 
 
    <li>Add cayenne pepper, chilli flakes, mixed herbs and paprika</li> 
 
    <li>Cook until all pink of chicken disappears Salad 
 
    </li> 
 

 
    </ol> 
 
</div>

來源

2017-07-05 James

的可能的複製[如何水平居中未知寬度的無序列表？（https://stackoverflow.com/questions/1695175/how-to-horizontally-center-an -unordered-list-of-unknown-width） – Rob

更改您的div的位置屬性，以絕對或相對的。那麼你應該能夠定位它。然後使用margin：auto將其置於中心。

position: relative; 
margin: auto;

添加以下內容到你的CSS或爲最好的結果頁面上顯示了

position: absolute; 
left: 400px; //<!--Change this to position it manually-->

來源

2017-07-05 22:40:47 DMrFrost

非常感謝:)向我解釋爲什麼定位需要相對才能做到這一點？謝謝！ – James

將您的位置設置爲relative會告訴瀏覽器此元素將根據其作爲常規html的位置進行移動和定位。絕對位置告訴瀏覽器您的元素將位於左上角。我是一名新秀，並且仍然把所有這些東西搞清楚。祝你好運 – DMrFrost

請糾正我，而不是downvoting我的人，Id愛知道更好的解決方案。 – DMrFrost

運行此。

.images{ 
 
    display:inline-block; 
 
    text-align:center; 
 
    width:33%; 
 
    /* all ements align to the largest element within the div */ 
 
    vertical-align:top; 
 

 
    
 
} 
 

 
.images ol{ 
 
    margin-left:auto;width:100%;margin-right:auto; 
 
} 
 
.images ol li{ 
 
    text-align:left; 
 
    margin-left:15%;margin-right:20%; 
 
    line-height:1.2em; 
 
    border:0; 
 

 
}

<div class = "images"> 
 
\t \t <h3>Panacotta Vanilla</h3> 
 
\t \t \t \t <img src = "photo1.png.png"> 
 
\t \t \t \t <p>recipe ingridients</p> 
 
\t \t \t \t <ol id="mylist"> 
 
\t \t \t \t \t <li>Macro free Ranged Chicken</li> 
 
\t \t \t \t \t <li>Cover chicken in almond meal</li> 
 
\t \t \t \t \t <li>Add cayenne pepper, chilli flakes, mixed herbs and paprika</li> 
 
\t \t \t \t \t <li>Cook until all pink of chicken disappears 
 
\t \t \t \t \t Salad</li> 
 

 
\t \t \t \t </ol> 
 
\t \t </div>

來源

2017-07-05 23:08:10 slevy1

居中一個無序列表

回答

相關問題