DIV與CSS中心DIV

我想在CSS中創建一個非常簡單的按鈕，但無法讓我的按鈕中的箭頭位於我的圓圈中心。DIV與CSS中心DIV

我用：

top: 50% 
left: 50%

嘗試和我的中心圈div中我的箭格，當然，這只是我的中心箭頭格的左上角，而不是中心位置。

我該如何將div完美地集中在div中？我最好喜歡一個解決方案，我的兩個div的寬度和高度無關緊要，所以我可以在以後輕鬆更改它們。

我當前的代碼： http://jsfiddle.net/zhWGx/

來源

2014-07-10 user2370460

http://jsfiddle.net/zhWGx/3/ –

試試這一個，讓你的三角形position:absolute，然後頂，左底，對的將是0.製作margin:auto。然後你就完成了。

.triangle 
{ 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-color: transparent transparent transparent red; 

    position: absolute; 
    top: 0; 
    left: 0; 
    right:0; 
    bottom:0; 
    margin:auto; 
}

鏈接：http://jsfiddle.net/Vigiliance/zhWGx/4/

附：

當你使用這種方法時，你會詛咒IE。

來源

2014-07-10 09:50:31

你可以試試這個，如果你的圈子始終相同的大小：http://jsfiddle.net/zhWGx/1/

.triangle 
{ 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 10px 0 10px 17.3px; 
border-color: transparent transparent transparent #ffffff; 

position: relative; 
display: block; 
margin: 10px auto ; 
top: 10px; 

}

來源

2014-07-10 09:50:22

http://jsfiddle.net/Oliboy50/zhWGx/14/

如果要調整三角形位置你想要的方式：

.triangle 
{ 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 10px 0 10px 17.3px; 
    border-color: transparent transparent transparent #ffffff; 

    position: absolute; /* absolute (the parent is relative) */ 
    top: 50%; 
    left: 50%; 
    margin-top: -10px; /* triangle height/2 */ 
    margin-left: -6px; /* triangle width/2 (6.85px) or what you want */ 
}

來源

2014-07-10 09:55:25 Oliboy50

這應該修復它

.triangle 
    { 
     width: 0; 
     height: 0; 
     border-style: solid; 
     border-width: 10px 0 10px 17.3px; 
     border-color: transparent transparent transparent #ffffff; 
     background:linear-gradient(transparent, transparent, transparent, #FFFFFF); 
     position: relative; 
     margin-left: 15px; 
     top:24% 

    }

來源

2014-07-10 09:56:12 Izekid

如果你想能中心的元素與未知尺寸，您可以對該元素使用轉換（翻譯）。

transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%);

http://jsfiddle.net/zhWGx/23/

注意，這是隻支持現代瀏覽器。

來源

2014-07-10 09:58:45

這很好！但正如你在現代瀏覽器中所說的=） – Izekid

事實上，只要你不需要支持Internet Explorer 7和8，這是一個簡單的解決方案，並且可以在每種情況下工作。 –

你可以試試：

.triangle { 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 10px 0 10px 17.3px; 
border-color: transparent transparent transparent #ffffff; 
position: relative; 
top: 25%; 
left: 40%; 
}

來源

2014-07-10 09:59:41 DragonK

如果您的div中只有文字，你可以這樣做：

.inside-div { 
    display: inline: // for IE 
    display: inline-block; 
    text-align: center; 
}

否則：

.parent-div { 
    position: relative; 
} 
.inside-div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 500px; 
    margin-left: -250px; 
    height: 500px; 
    margin-top: -250px; 
}

像這樣的事情http://jsfiddle.net/zhWGx/27/，但在這種情況下，您應該計算三角形的幾何位置並設置邊距。

來源

2014-07-10 10:01:25 iamawebgeek

DIV與CSS中心DIV

回答

相關問題