頂部：50％不工作CSS

我正在做一個網站，我試圖居中一個文本，但我不知道什麼頂部不工作。它的工作原理，如果我用的是這樣的：頂部：50％不工作CSS

up:50%;

你能幫我：

up:25px;

但是，當我想用這個本不工作？這是我的代碼：

.absolute{ 
 
    position:absolute; 
 
} 
 

 
.relative{ 
 
    position:relative; 
 
} 
 

 
.white{ 
 
    background-color:white; 
 
} 
 

 
#menu-title{ 
 
    width:300px; 
 
    z-index:5; 
 
    top:50%; 
 
    left:calc(50% - 150px); 
 
    top:calc(50% - 2.5em); 
 
}

<div class='relative' id='menu'> 
 
     <div class='absolute white' id='menu-title'> 
 
     <h2 >Menu</h2> 
 
     </div> 
 
</div>

來源

2016-12-04 manuel silva

A）Your'e聲明'top：'兩次，所以第一個被覆蓋。 B）使用'calc（）'函數，您還將項目向上移動2.5ems（偏離垂直中心）....因此它離開視口。一切似乎都像你寫的一樣工作。 – Scott

問題是，CSS不知道父級的高度是多少。那麼... 50％是什麼？ –

@Scott連續兩個相同的屬性，其中第二個具有「calc」值，實際上非常正常;實際上它是建議的向後兼容性的做法。 –

你應該使用位置：固定，也取決於文本的大小，你可以將它移到正好符合中心轉變

#menu-title{ 
position: fixed; 
top: 50%; 
left: 50%; 
/* bring your own prefixes */ 
transform: translate(-50%, -50%); 
}

希望可以幫到

來源

2016-12-04 20:00:01

固定位置與絕對位置根本不同。 – JoostS

考慮到你想把<h2>居中放在<div>與'menu-title'的id，你有幾種方法來做到這一點。

如果你想使用的頂級物業，你首先要確定的位置固定的，就像這樣：

#menu-title { 
    position: fixed; 
    top: 50%; 
}

其他方式做到這一點是使用邊距：

#menu-title { 
    margin-top: 100px; 
}

你可以隨時更改px。

來源

2016-12-04 20:01:01

固定位置與絕對位置根本不同。 – JoostS

讓position:fixed

.absolute{ 
 
    position:fixed; 
 
} 
 

 
.relative{ 
 
    position:relative; 
 
} 
 

 
.white{ 
 
    background-color:white; 
 
} 
 

 
#menu-title{ 
 
    width:300px; 
 
    z-index:5; 
 
    top:50%; 
 
    left:calc(50% - 150px); 
 
    top:calc(50% - 2.5em); 
 
}

<div class='relative' id='menu'> 
 
     <div class='absolute white' id='menu-title'> 
 
     <h2 >Menu</h2> 
 
     </div> 
 
</div>

來源

2016-12-04 20:02:02 jafarbtech

固定位置與絕對位置根本不同。 – JoostS

首先...這是工作，不僅沒有如你預期它。 CSS top:calc(50% - 2.5em)，相對於第一個POSITIONED祖先元素。在你的情況下，這是id="menu"的相對（父）元素。這個元素的高度是0.因此，它的工作原理應該如此，但並非如你所料。

您可能預料菜單有一定的高度。它沒有，因爲它唯一的孩子（菜單標題div）是絕對定位的。絕對定位的元素不會增長他們的父母。

更可能是您預期標題將相對於視口高度進行定位，而不是相對於其父項。

有三種方式菜單標題相對於視高度的位置：

解決方法1.從父刪除相對定位

這會讓家長位靜止（沒有定位），第一個定位祖先元素成爲視口。該視口本質上具有100％的高度。因此這個解決方案有效該解決方案的工作實施例在這裏可以找到：http://codepen.io/anon/pen/bBLZva

溶液2得到母體100％高度

當從本祖先（多個）的相對定位不是一個選項，可以給父母100％身高。但是，這不是一個簡單的任務。只需將CSS height: 100%添加到父項是不夠的。菜單div的高度是相對於其父元素的高度而不是視口的高度。因此，您需要將其父母顯式設置爲100％（視口高度）。這可以通過向CSS添加：body,html {height: 100%;}來實現。該解決方案的工作示例可以在這裏找到：http://codepen.io/anon/pen/XNZGOv

解決方案3.使用位置固定

要知道，position: fixed比position: absolute根本不同的，在舊的iOS和Android版本（股票瀏覽器）的兼容性問題。但它可能會導致預期的行爲。這可以通過以下事實來解釋：'position：fixed'意味着相對於視口（而不是父視圖）的定位。你應該使用固定在標題上的位置。這個解決方案的工作示例可以在這裏找到：http://codepen.io/anon/pen/PbQgpB

來源

2016-12-04 20:06:09 JoostS

頂部：50％不工作CSS

回答

相關問題