中心絕對內容在一個相對格

enter image description here 如何將跨度內容居中在一個div內，並添加一個動態div高度取決於出現多少行？中心絕對內容在一個相對格

CSS：

div { 
    position: relative; 
    height: auto; 
    width: 100%; 
    margin: 0px auto; 
} 
span { 
    position: absolute; 
    width: 10px; 
    height: 10px; 
    background-color: #003858; 
}

這是HTML內容：

<div> 
<span style="left: 12px; top: 0px;">&nbsp;</span> 
<span style="left: 24px; top: 0px;">&nbsp;</span> 
<span style="left: 36px; top: 0px;">&nbsp;</span> 
<span style="left: 48px; top: 0px;">&nbsp;</span> 
<span style="left: 60px; top: 0px;">&nbsp;</span>     
<span style="left: 12px; top: 15px;">&nbsp;</span> 
<span style="left: 24px; top: 15px;">&nbsp;</span> 
<span style="left: 36px; top: 15px;">&nbsp;</span> 
<span style="left: 48px; top: 15px;">&nbsp;</span> 
<span style="left: 60px; top: 15px;">&nbsp;</span>     
<span style="left: 12px; top: 30px;">&nbsp;</span> 
<span style="left: 24px; top: 30px;">&nbsp;</span> 
<span style="left: 36px; top: 30px;">&nbsp;</span> 
<span style="left: 48px; top: 30px;">&nbsp;</span> 
<span style="left: 60px; top: 30px;">&nbsp;</span> 
</div>

enter image description here

來源

2015-04-06 cvelinho

您正在手動設置每個「span」元素的'left'位置。你是什麼意思，你想要集中他們？ – jcuenod

當div內的所有內容都是絕對的時，div將沒有寬度或高度。你不能在沒有寬度和高度的div內居中放置任何東西。 –

這樣的東西http://postimg.org/image/8vn7pwx7p/ – cvelinho

只需添加到您的div容器樣式：

left: 50%;

結帳THI s DEMO

您可以嘗試根據跨度總寬度調整百分比。

來源

2015-04-06 14:58:49 SaidbakR

ahah，@sємsєм，打我吧;） – ieblake

;）沒關係...... – SaidbakR

將margin-left:50; /*50% is about halfway*/添加到您的div。

編輯

left作品幾乎一樣margin-left。

來源

2015-04-06 15:01:56 ieblake

我不會絕對定位，它不是非常動態，除非你是從一個確切的模型構建HTML。

CSS

#container { 
    width:100%; 
} 
#blocks { 
    margin: auto auto; 
    width: 80px; 
    background-color: #ff8200; 
    line-height: 0; 
    padding: 0 0 5px 0; 
} 
span { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin: 5px 0 0 5px; 
    background-color: #003858; 
}

HTML

<div id="container"> 
<div id="blocks"> 
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> 
</div> 
</div>

https://jsfiddle.net/yeh28ja1/

這樣你可以再補充跨度和增加#blocks寬度根據需要，而不做一堆數學。但取決於你的應用程序在做什麼，這可能會適得其反。我們真的不知道你想做什麼。

更新了一些絕對定位居中技術。

https://jsfiddle.net/yeh28ja1/2/

通知使用負邊緣的，這將取決於你絕對定位元件的寬度。

來源

2015-04-06 15:40:33

每個跨度在div中都有左上角位置，所以無論跨度內容有多大，所有內容都應以某種方式爲中心（大圖是一個實例） – cvelinho

@cvelinho查看我的示例，您可以居中包含跨度的div ，但你需要給它的寬度和高度。 div的父母也需要全長，以便其子女可以居中。 –

是的，這是相當好的，但問題是我必須爲跨度元素設置絕對位置（它也可以是div或td） – cvelinho

中心絕對內容在一個相對格

回答

相關問題