中心绝对内容在一个相对格

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

中心绝对内容在一个相对格

回答

相关问题