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

时间:2015-12-21 11:10:56

标签: html css

我借用了这个(接受的答案)venn diagram script做了显而易见的事情,但是我很难得到<div>中的任何文字来对齐中心和valign中间。我已经尝试将两者都添加到div {}的CSS中,但这不起作用。我试过显示:表格确实有效,但是这弄乱了其余圆圈的位置。如您所见,该数字位于outer1 div的左上角。我需要它在中间,并且能够为所有7个圆圈/重叠做同样的事情

CSS:venn image

.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数据进行维护,那么请按照我的方式解决。

非常感谢

1 个答案:

答案 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;
}