带CSS的中心框元素

Question

我尝试将box元素居中，因为我将其最大宽度减小到1060px

网址：https://www.tresor-ethnique.com/cart

.ls-recommendation-box[data-box-type="Upsell"] .ls-ul li.ls-show {
    align-self: center !important;
}

也许我选择的选择器是错的？我尝试了几个

任何帮助将不胜感激， 让我知道谢谢:) 帕斯卡

Answer 1

您只需在css中添加 margin：0 auto

示例代码

.ls-recommendation-box[data-box-type="Upsell"] {
   margin: 0 auto !important; 
}

<强>截图

Answer 2

试试这个

.ls-recommendation-box[data-box-type="Upsell"] .ls-ul li.ls-show {
    display: block;
    margin: 0 auto;
}

justify-self: center只有在使用flexbox

时才有效

Answer 3

您可以使用flexbox对内容进行居中

＆＃13;

＆＃13;

.main{
  display:flex;
  border:2px solid #333;
  justify-content:center;
  }
  .main01{
  width:60%;
  margin:20px auto;
  border:2px solid #333;
  text-align:center
  
  }

＆＃13;

<div class="main">
  <h2>Lorem</h2>
</div>

<div class="main01">
  <h2>Lorem</h2>
  <img src="http://via.placeholder.com/350x150" alt=""/>
</div>

＆＃13;

＆＃13;

＆＃13;