CODEWITHSUNDEEP
css
Pascal
Pascal

Reputation: 119

Center box element with CSS

I try to center a box element since I reduced its max width to 1060px

enter image description here

URL: https://www.tresor-ethnique.com/cart

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

Maybe the selector I chose is wrong? I tried couple of those

Any help would be greatly appreciated, Let me know thanks :) Pascal

Upvotes: 0

Views: 70

Answers (3)

Sharma Vikram
Sharma Vikram

Reputation: 2480

You only need to add margin:0 auto in your css

Sample code

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

Screenshot

enter image description here

Upvotes: 3

Javed Ahmed Sheikh
Javed Ahmed Sheikh

Reputation: 79

You can use flexbox for centering the content

.main{
  display:flex;
  border:2px solid #333;
  justify-content:center;
  }
  .main01{
  width:60%;
  margin:20px auto;
  border:2px solid #333;
  text-align:center
  
  }
<div class="main">
  <h2>Lorem</h2>
</div>

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

Upvotes: 0

Smokey Dawson
Smokey Dawson

Reputation: 9240

Try this instead

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

justify-self: center would only work if you were using flexbox

Upvotes: 2

Related Questions