Question

如果你想要一个以边距为中心的方框：0自动，但你想略微调整它的位置几个像素。有办法吗？换句话说，内容居中加上左/右的x像素？

我知道我可以添加左：x。但那不会做我想要的，我想确保元素居中只有几个像素在左边。如果我调整jsut左边的元素而不让它居中。它最终会出现在不同屏幕尺寸的不同位置。

CSS

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

Answer 1

您可以使用翻译属性

来完成

＆＃13;

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

＆＃13;

<div class="test"></div>

＆＃13;

Answer 2

您可以使用position：relative和'left'或'right'属性的负值来实现。看看我制作的这个片段。

<div class="parent">
  <div class="child">
  </div>
</div>

docker run --rm -ti \
        -v $SSH_AUTH_SOCK:/tmp/ssh_auth.sock \
        -e SSH_AUTH_SOCK=/tmp/ssh_auth.sock \
        -w /src \
        my_image

有没有办法移动元素水平包含边距：0自动与左或右的额外像素？

2 个答案: