按钮忽略父div并不会对齐

我不能完全了解底部：似乎我的父div被浏览器忽略，当我想对齐它时。希望你们中的任何人都能得到它！谢谢！按钮忽略父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>

来源

2013-06-21 User

卡在屏幕右侧？似乎并不像：http://jsfiddle.net/hppXY/。也许你可以告诉我们，你想要实现什么？ – supersize

也适用于我..http：//jsfiddle.net/DswL2/ – Ani

我认为我们需要更多关于你想要做什么和更多html的上下文。 – Alex

已经有一对夫妇的答案在这里，甚至是不二人选。但是，我想我会分享我的备用解决方案，所以有更多的选择可供您使用。

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

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

这里有一个的jsfiddle：http://jsfiddle.net/RgGHW/

无论不过，很高兴你得到了一个回答您的问题！

来源

2013-06-21 20:54:07 Serlite

谢谢！好的解决方案对我更好:) – User

我很高兴我能帮助你。祝你好运网发展！ – Serlite

如果你只想把那个元素放到中心，这可能是一条路：

#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

来源

2013-06-21 20:37:42 supersize

真是太棒了！谢谢！现在，只是为了我的理解;那么从现在开始你有什么想法，我可以再次处理这个问题？ ;-) – User

这取决于你想要达到的目标。在不同的情况下，你使用不同的位置和div的嵌套。在你的情况下，你可以用'position：absolute'保持简单。正如其他答案所说，如果你的布局有更多的元素，并且他们一起构建起来，这个解决方案可能不太好。 – supersize

绝对定位可以得到一个有点讨厌，我假设你有一个像素宽度的div容器。只需在容器上设置宽度（button-sub heading），然后在button上设置宽度和自动边距。该按钮将位于其容器中。

你必须有一个宽度你想用margin:auto

这里居中元素设置粗糙例如：http://jsfiddle.net/hppXY/4/

来源

2013-06-21 20:46:49

按钮忽略父div并不会对齐

回答

相关问题