Question

我正试图将div框放在偏离中心和左侧的位置。它必须是绝对定位，我不能将它包装在另一个div中，因为它是由一个非常长的js脚本生成的。

到目前为止，这是我的css：

XNamespace ns = "http://www.sitemaps.org/schemas/sitemap/0.9";
foreach (var loc in siteMap.Descendants(ns + "loc"))
{
    ...
}

我正在使用.nivo-html-caption { position:absolute; top:59px; opacity:0.8; transition:all 0.8s ease-out; background-color: rgba(0,0,0,0.24); width: 350px; color: #cbcbcb; padding: 10px; margin:auto; }将其居中，而margin:auto;则将其从顶部推下来。但我现在需要将它从中心向左推至约300px。

我不太确定如何在不将它包装在另一个div中或者在其中放入另一个div的情况下如何做到这一点（我真的不想开始这样做，因为它会带来很多麻烦）

Answer 1

您的请求有点不清楚，但您首先需要将项目居中，然后将其移动超过所需调整的50％。

.nivo-html-caption {
    position:absolute;
    top:59px;
    left:50%; 
    transform:translateX(-50%); /* centered first regardless of width*/
    margin-left: -175px; /* then moved over */

.parent {
    position: relative;
    height: 500px;
    border:1px solid green;
}
.nivo-html-caption {
    position:absolute;
    top:59px;
    left:50%;
    transform:translateX(-50%);
    margin-left: -175px;
    opacity:0.8;
    transition:all 0.8s ease-out;
    background-color: rgba(0, 0, 0, 0.24);
    width: 350px;
    color: #cbcbcb;
    padding: 10px;
}
.center {
    position: absolute;
    top:0%;
    left:50%;
    height: 100%;
    width: 1px;
    background: red;
}

<div class="parent">
    <div class="nivo-html-caption"></div>
    <div class="center"></div>
</div>

Answer 2

如果

$scope.$on('$locationChangeStart', function(event) {
if ($scope.form.$invalid) {
   event.preventDefault();
  }
});

设置为margin: 0 auto，则

position无法为您提供正确的结果，请尝试：

absolute

Answer 3

因为它定位绝对，而不是使用margin：auto对中，请尝试以下操作：

left: 50%;
margin-left: -175px;

这将使其居中并调整左边距将使其偏离中心。

Answer 4

position: absolute;
margin: auto;
top: 0px;

这将使div粘在左侧。和垂直中心

示例小提琴here

Answer 5

尝试这样： Demo

h1 {
    position:absolute;
    top:59px;
    opacity:0.8;
    transition:all 0.8s ease-out;
    background-color: rgba(0, 0, 0, 0.24);
    width: 350px;
    color: #cbcbcb;
    padding: 10px;
    margin:auto;
    left: 50%;
    margin-left: -25%;
}

HTML：

<h1> Text half center </h1>

我尝试使用left将其对齐到中心，并使用margin-left

移动一半

css位置绝对偏离中心左侧

5 个答案: