将无序列表居中

Question

有一个以 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>

Answer 1

在全页视图中运行此程序以获得最佳效果。

.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">
		<h3>Panacotta Vanilla</h3>
				<img src = "photo1.png.png">
				<p>recipe ingridients</p>
				<ol id="mylist">
					<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>

Answer 2

将 div 的位置属性更改为绝对或相对。然后你应该能够定位它。然后使用 margin: auto 将其置于中心。

position: relative;
margin: auto;

将此添加到您的 CSS 或

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