定心百分比基於div的

我看這個問題： Centering a percent-based div 定心百分比基於div的

但是我的企圖是徒勞的。我不太明白這個問題的答案是有道理的，或者如何以100％的寬度做到這一點。基本上我有一個動態呈現頁面有兩個div - 都設置爲100％寬度和100％高度，以便捕獲整個輸出。因此，如果兩個div有兩種不同長度，我要到div中心到身體：

<body> 
    <div id="first">Longer Name</div> 
    <div id="second">Name</div> 
</body>

電流輸出：

OUTPUT LONGER 
OUTPUT SHORT

所需的輸出：

OUTPUT LONGER 
    OUTPUT SHORT

DIV + CSS：

height: 100%; 
position: relative; 
width: 100%;

body CSS：

margin: 0; 
padding: 0;

由於輸出的動態特性，基於百分比的div是必需的。

編輯

我要清楚的輸出是一噸表。我舉的例子是展示我希望它如何居中。輸出不是文本。基本上，一個表格的寬度可以是120px，我需要將它放在主體中（這可以是更長的div的寬度，可以是1500px）。

來源

2012-10-10 user82302124

的text-align：中心？ –

你可以創建一個jsFiddle的例子嗎？ – j08691

我可以 - 但輸出是怪異的...讓我看看我能做些什麼 – user82302124

#first, #second { text-align: center; }

來源

2012-10-10 19:55:53

這是正確的 - 我的代碼是問題。感謝你的回答。 – user82302124

http://jsfiddle.net/MBmyV/1/ - 你的小提琴編輯 –

爲了進一步我的答案 - 我有一些與子divs的定位問題。我解決了這些問題，最終導致了我的問題 – user82302124

當您％使用寬度，您的網站是靈活的，如果你想在中心內所有的div u使用這個代碼，這個代碼的任何元素的內容有用的將是在任何網站上放置

#first, #second{  
    width:100%; 
    text-align:center; 
}

中心

問候

來源

2012-10-10 20:03:55

您可以使用這種CSS的：

#mydiv{ 
position:fixed; 
padding:0px; 

z-index: 101; 
top:50%; 
left:50%; 
transform: translate(-50%, -50%); /*what you actually need to center*/ 

width: 80%; 
height: 80%; 
background:rgba(0,0,0,1); 
display: none; 
border:1px solid #d2d2d2; 
}

來源

2016-02-08 10:31:14 mrapsogos

定心百分比基於div的

回答

相關問題