CODEWITHSUNDEEP
htmlcss
user8482388
user8482388

Reputation:

is there a way to to move element horizontal that contains margin: 0 auto with extra pixel to the left or right?

If you want a box centred with margin: 0 auto, but you want to slightly adjust its position by few pixel. is there a way? In another words content centred plus x pixel to the left/right?

I know I can add left: x. But that would not do what I want, I want to make sure the element is centered with only few pixel to the left. if I adjust jsut the left element without having it centered. it could ended up being in different location in different screen sizes.

CSS

.test{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    /*Plus code for x pixel to left/right.*/
}

Upvotes: 0

Views: 422

Answers (2)

AndrePliz
AndrePliz

Reputation: 259

You can do it by using position:relative and a negative value on 'left' or 'right' property. Look at this snippet I made.

.parent {
  width: 100%;
  background: red;
  padding: 50px 0;
  box-sizing: border-box;
  
}
.child {
  position: relative;
  width:50%;
  margin: 0 auto 0 auto;
  height: 200px;
  background: #fff;
  right: -50px;
}
<div class="parent">
  <div class="child">
  </div>
</div>

Upvotes: 0

Renzo Calla
Renzo Calla

Reputation: 7706

You can do it using translate property

.test{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    /*Plus code for x pixel to left/right.*/
    background:red;
    
    transform:translateX(10px);
}
}
<div class="test"></div>

Upvotes: 1

Related Questions