html - 居中无序列表

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

在整个页面 View 中运行此操作以获得最佳效果。

.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>