我借用了这个(接受的答案)venn diagram script做了显而易见的事情,但是我很难得到<div>
中的任何文字来对齐中心和valign中间。我已经尝试将两者都添加到div {}的CSS中,但这不起作用。我试过显示:表格确实有效,但是这弄乱了其余圆圈的位置。如您所见,该数字位于outer1 div的左上角。我需要它在中间,并且能够为所有7个圆圈/重叠做同样的事情
.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>
或者,如果某人有一个更好的替代方案,使用现场php / mysql数据进行维护,那么请按照我的方式解决。
非常感谢
答案 0 :(得分:2)
这样做:
<强>标记
<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;
}