Question

我无法理解这一点：当我想要对齐时，浏览器似乎忽略了我的父div。希望你们任何人都能得到它！谢谢！

这是我的父母div：

#button-subheading {
height: auto;
width: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}

这是我的孩子：

 .button, button {
    color: #fff !important;
    font-size: -63px;
    font-family: "CentraleSans-Bold","Helvetica Neue",Helvetica,Arial;
    line-height: 265%;
    text-decoration: none;
    background-color: #167de4;
    padding: 0 20px;
    position: absolute;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    border: 1px solid #1d4ea4;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.23),inset 0 1px 0 rgba(255,255,255,0.19);
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #3669ef), color-stop(100%, #4f95f4));
    background-image: -webkit-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
    background-image: -moz-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
    background-image: -o-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
    background-image: linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
    text-shadow: 0 1px 2px rgba(0,0,0,0.75);
    white-space: nowrap;
    text-overflow: ellipsis;
    }

当我尝试通过此HTML实现它时，它会卡在屏幕的左侧：

    <div id="button-subheading">
        <div class="button" href="#" style="opacity: 1;">Get started with a free 30-day trial</div>
    </div>

Answer 1

如果您只想将该元素放入中心，这可能是一种方法：

#button-subheading {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  width: auto;
  text-align: center;
  margin-left: -150px; /* half the width of your element */
  margin-top: -150px;  /* half the height of your element */
}

FIDDLE

Answer 2

这里已有几个答案，甚至是一个选定的答案。但我想我会分享我的备用解决方案，所以你可以选择更多的选择。

我解决的方法是在.button按钮样式下更改一行CSS，将position:absolute转换为display:inline-block。绝对定位可能很难在布局中正确工作，因为它基本上从HTML的“流程”中删除了元素。

另外，我认为可能对你有帮助的另一个小问题是对按钮使用锚（a）元素而不是div，因为点击一个锚实际上会带你到指定的href。

这是一个JSfiddle：http://jsfiddle.net/RgGHW/

无论如何，很高兴你能回答你的问题！

Answer 3

绝对定位可能会有点恼人，我假设你有一个像素宽度的容器div。只需在容器上设置宽度（button-sub heading），然后在button上设置宽度和自动边距。按钮将在其容器中居中。

您必须在要与margin:auto

居中的元素上设置宽度

以下是粗略示例： http://jsfiddle.net/hppXY/4/

按钮忽略父div并且不会对齐

3 个答案: