对齐绝对定位的div上的文本 - 维尔图

我借用了这个（接受的答案）venn diagram script做了显而易见的事情，但我很努力地得到我在<div>之内的任何文字来对齐中心和valign中间。我已经尝试将div添加到CSS中，但这不起作用。我试过显示器：表工作正常，但是这弄乱了其余圆圈的位置。正如你所看到的，数字在outer1 div的左上角。我需要它在中间，并且能够为所有7圈做相同/重叠对齐绝对定位的div上的文本 - 维尔图

CSS：

.venn div { 
    width: 250px; 
    height: 250px; 
    border-radius: 50%; 
    pointer-events: none; 
    position: absolute; 
    text-align: center; 
    vertical-align: middle; 
} 

.venn.innerw { 
    left: 50px; 
    top: 0px; 
    overflow: hidden; 
    position: absolute; 
    /* border: solid; */ 
    z-index: 20; 
    /* transform: translateZ(10px); */ 
    pointer-events: none; 
} 

.venn.innerw2 { 
    margin-left: 0px; 
    top: 0px; 
    overflow: hidden; 
    position: static; 
    /* border: solid; */ 
    /* z-index: 20; */ 
    pointer-events: none; 
} 

.venn.innerw3 { 
    margin-left: 170px; 
    top: 0px; 
    overflow: hidden; 
    position: static; 
    /* border: solid; */ 
    /* z-index: 20; */ 
    pointer-events: none; 
} 

.venn.inner { 
    margin-left: -85px; 
    margin-top: 130px; 
    background-color: palegreen; 
    z-index: 20; 
    position: static; 
    pointer-events: auto; 
} 

.venn.inner:hover { 
    background-color: green; 
} 

.venn.mwrap { 
    position: absolute; 
    overflow: hidden; 
    pointer-events: none; 
    z-index: 10; 
} 
.venn.mwrap2 { 
    position: static; 
    margin-left: 0px; 
    margin-top: 0px; 
    overflow: hidden; 
    pointer-events: none; 
} 
.venn.mid { 
    position: static; 
    pointer-events: auto; 
} 
#midaw1 { 
    left: 50px; 
    top: 0px; 
} 
#mida { 
    left: 50px; 
    margin-left: 170px; 
    margin-top: 0px; 
} 
#midbw1 { 
    left: 220px; 
    top: 0px; 
} 
#midb { 
    margin-left: -85px; 
    margin-top: 130px; 
} 
#midcw1 { 
    left: 135px; 
    top: 130px; 
} 
#midc { 
    margin-left: -85px; 
    margin-top: -130px; 
} 
.venn.mid { 
    background-color: lightblue; 
    z-index: 15; 
} 
.venn.mid:hover { 
    background-color: blue; 
} 


#outer1 { 
    left: 50px; 
    top: 0px; 
} 

#outer2 { 
    left: 220px; 
    top: 0px; 
} 
#outer3 { 
    left: 135px; 
    top: 130px; 
} 
.venn.outer { 
    background-color: lightcoral; 
    z-index: 1; 
    pointer-events: auto; 
} 
.venn.outer:hover { 
    background-color: red; 
}

这里的HTML

<div class="venn"> 
<div id="outer1" class="venn outer"> 

     <?php echo $lp1; ?> 

</div> 
<div id="outer2" class="venn outer"> 

</div> 
<div id="outer3" class="venn outer"> 
</div> 
<div id="midaw1" class="venn mwrap"> 
<div id="midaw2" class="venn mwrap2"> 
<div id="mida" class="venn content mid"></div> 
</div> 
</div> 
<div id="midbw1" class="venn mwrap"> 
<div id="midbw2" class="venn mwrap2"> 
<div id="midb" class="venn content mid"></div> 
</div> 
</div> 
<div id="midcw1" class="venn mwrap"> 
<div id="midcw2" class="venn mwrap2"> 
<div id="midc" class="venn content mid"></div> 
</div> 
</div> 
<div class="venn innerw"> 
<div class="venn innerw2"> 
<div class="venn innerw3"> 
<div class="venn inner"> 
</div> 
</div> 
</div> 
</div> 
</div>

，或者如果有人有更好的替代一个带有live php/mysql数据的维恩图，然后请用我的方式解雇它。

非常感谢

来源

2015-12-21 Adam Copley

把你的代码在这里。你在做什么标记以及准确的输出结果是什么？ – Trix

@Trix我已经添加了代码和一个图像的当前输出，并对所需的解释。 –

做这样的：

标记

<div class="venn"> 
    <div id="outer1" class="venn outer"> 
     <p>Some text</p> 
    </div> 
</div>

CSS

.venn.outer{ 
    display: table; 
    text-align: center; 
} 
.venn.outer p{ 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2015-12-21 11:33:28 Trix

优秀，谢谢！ –

对齐绝对定位的div上的文本 - 维尔图

回答

相关问题