1

我正在尝试将书签添加到我的 wop 网站。问题是我想让小书签（在下图中以红色突出显示）居中，就好像它没有箭头伸出侧面一样。如果我更改 css 中 bgimage 的宽度，使其与下面的缩进框相同，它会以我想要的方式居中。但是，它切断了一点箭头。所以，我的问题是，我怎样才能使小书签居中，就好像它具有其他缩进框的宽度一样。

在此处输入图像描述

小书签 CSS：

#bookmarklet {
    background-image:url('images/bookmarklet.png');
    width:425px;
    height:175px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:8px;
}

我希望小书签像它一样居中（不切掉箭头的一侧）：

#resultbg {
    background-image:url('images/resultbg.png');
    width:404px;
    height:347px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-top:8px;
}

任何帮助是极大的赞赏！谢谢（：

4

3 回答 3

1

测量箭头从框中“伸出”的像素数量，将其除以 2 并将其设为左边距

这是我想到的第一件事。但是，您首先使用左边距使图像居中。也许有一个容器 div，用 margin-left: auto 和 margin-right: auto 将这个 div 居中，然后在这个 div 内使用图像的边距。那应该工作

于 2012-06-18T03:06:53.107 回答
1

只需添加

background-position:center;

到应该居中的背景

于 2012-06-18T03:07:20.603 回答
0

几个选项：

  1. 减少图像的宽度并在侧面填充一些空白空间，这样它就不会被切断。
  2. 将图像包装在 div 中并设置宽度，以便使用一些填充或边距根据需要定位背景图像。
于 2012-06-18T03:12:34.690 回答