Luke Luke - 1 year ago 93
CSS Question

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.*/
}

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download