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

在整页视图中运行此选项可获得最佳效果。

＆＃13;

strings.xml (uk)

＆＃13;

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

＆＃13;

Answer 2

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

position: relative;
margin: auto;

将此添加到您的css或

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

将无序列表居中

2 个答案: