Question

我有一个网站：[现已解决，因此必须删除网站网址]，其中悬停缩略图时会出现叠加层。它在Firefox浏览器上运行得很好，但它在Chromium浏览器上运行不正常，内容div更偏向左侧。任何人都可以告诉我在上面提到的网站上使用firebug或inpect元素工具如何将叠加内容div与中心对齐，就像它来自firefox一样？

请注意，如果我将宽度设置为100％，它会得到修复，但我希望自动调整宽度，就像高度一样。

我尝试了以下代码，但它没有工作：

.project-title {
    max-width: 250px;
    width: auto;
    border-radius: 15px;
    height: auto;
    opacity: 0.7;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto!important;
    bottom: 0;
    color: #202020 !important;
    background-color:#dbdbdb;
    font-family: Lato !important;
    font-size: 12pt !important;
    }

Answer 1

您正尝试以两种不同的方式居中对齐。如果您正在使用margin:auto，则您不应该拥有position:absolute;他们不会为您做任何事情。

如果你想将div对齐，那么有数百种方法可以做到这一点。这是两个简单的：

.project-title {
    width:250px;
    margin:0 auto;
}

或

.project-title {
    width:250px;
    position:absolute;
    left:50%;
    margin-left:-125px;
}

更高级的方式，取决于你的其他东西是如何设置的，是这样的：

.project-title {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

这将把它放在包含div的内部。

为了更多地帮助你，我需要知道包含你的div的内容以及预期的行为。

Answer 2

您已绝对定位.project-title，因此它已从页面的正常流程中删除。因此，margin: auto技巧无法发挥作用。

如下所示：

.project-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 250px;
  transform: translate(-50%, -50%);
}

居中对齐叠加层

2 个答案: