按鈕忽略父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並不會對齊

回答

相關問題