在中心的響應定位

我有一些內容的全寬背景圖像。最後，我想把我的按鈕放在中心（垂直和水平），但與position:absolute，這不工作。你可以在JSFiddle看到它。在中心的響應定位

沒有從我的CSS

.buttons{ 
    position:relative; 
} 

.buttons .button-pos{ 
    width:100%; 
    position:absolute; 
    margin:auto; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}

一些代碼行還有就是我想要的那個小計劃。

來源

2016-10-21 Daniels Jirgensons

隨着@Johannes回答樓下，你可以看看[W3學校關於中心事物的文章]（https://www.w3.org/Style/Examples/007/center.en.html），這幾乎可以解釋一切。 – table

我自己做了一些解決方案，現在它工作得很好，我決定將我的所有內容集中在標題中。只有屏幕尺寸有些小的變化和它工作得很好:)

#welcome-header .welcome-content{ 
    width: 80%; 
    height: 400px; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.buttons{ 
    margin-top: 40px; 
}

如果有人有一些更好的解決方案，有寫吧:)

來源

2016-10-21 22:08:59

但這不是集中，只是將'.buttons' divs底部移動到容器底部以上10％。它仍然沒有高度。試着重新思考我的答案。 – Johannes

@Johannes是啊我知道，即時編輯我的答案：D –

?? 'margin-top：40px'不會給'.buttons'一個高度（即仍然沒有居中） – Johannes

1）您.buttons DIV不具有的高度，所以首先你需要爲它定義一個高度，否則就沒有垂直居中可能性（我做了200像素的小提琴）。

2）內.buttons中心.button-pos，使用

.button-pos { 
    width: 100%; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
}

這裏的小提琴：https://jsfiddle.net/Luo1k7Lt/1/

來源

2016-10-21 21:49:25 Johannes

這也不起作用.... –

試試這個：

.buttons .button-pos { display: inline-block; zoom: 1; }

一個簡單的IE瀏覽器的黑客是添加display*: inline;在那個CSS規則

來源

2016-10-21 21:52:15 NathanielSantley

這有幫助嗎？ – NathanielSantley

nop，它不幫助 –

真的嗎？呵呵........ :-) – NathanielSantley

在中心的響應定位

回答

相關問題