HTML / CSS-并排重叠的圆圈

时间：2019-04-30 08:55:25

标签： html css

我正在尝试制作4个重叠的圆圈，每个圆圈的中间居中对齐（类似于PowerPoint SmartArt）。 我在网上找到了example，并能够对其进行修改以使圆圈并排放置，但是文本仍然无法正确对齐：

https://codepen.io/anon/pen/vMwEZz 

.venn-container {
  padding: 25px 25px 25px 200px;
}
.venncircle {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
}
.venncircle > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  margin-bottom: -210px;
  margin-left: 20px;
  background-color: #5c5b59;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(92, 91, 89, 0.5);
  z-index: 1;
  position: relative;
}
.venncirctop > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop:hover {
  z-index: 5;
  background-color: #6A6561;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(106, 101, 97, 0.9);
}
.venncirclft {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  margin-left: -157px;
  background-color: #093d5c;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(9, 61, 92, 0.5);
  z-index: 2;
}
.venncirclft > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirclft:hover {
  z-index: 5;
  background-color: #37688C;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(55, 104, 140, 0.9);
}
.venncircrt {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  margin-left: 200px;
  background-color: #5e577b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(94, 87, 123, 0.5);
  z-index: 3;
  text-align: right;
}
.venncircrt > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircrt:hover {
  z-index: 5;
  background-color: #625F75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(98, 95, 117, 0.9);
}
.venncircbtm {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  top: 0px;
  margin-right: 100px;
  margin-left: 390px;
  text-align: center;
  background-color: #627746;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(98, 119, 70, 0.5);
  z-index: 1;
  position: relative;
}
.venncircbtm > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircbtm:hover {
  z-index: 5;
  background-color: #3a4e20;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(58, 78, 32, 0.9);
}
.venntxttop {
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: 10px;
}
.venntxttop:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtrt {
  margin: 0 0 0 87px;
  display: inline-block;
  position: relative;
  top: 63px;
  z-index: 5;
}
.venntxtrt:hover {
  color: #FFFFFF;
  text-decoration:none;
}

.venntxtlft {
  width: 70%;
  display: inline-block;
  position: relative;
  top: 63px;
  z-index: 5;
}
.venntxtlft:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtbtm {
  text-align: center;
  display: inline-block;
  width: 70%;
  position: relative;
  top: 103px;
}
.venntxtbtm:hover {
  color: #FFFFFF;
  text-decoration:none;
}

我将继续调试，但感谢任何帮助/指针来使文本中心对齐。

2 个答案:

答案 0 :(得分：1)

从margin，width，top，.venntxtlft中删除.venntxtrt，.venntxtbtm和.venntxttop css值并添加关注您的CSS 

.venn-container a {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

答案 1 :(得分：1)

使用position:absolute更新了不使用margin-left:-45px的代码，并使用了{p> 

.venn-container a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.venn-container {
  padding: 10px;
}
.venn-container > div{
  float:left;
  position: relative;
}
.venncircle {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
}
.venncircle > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  background-color: #5c5b59;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(92, 91, 89, 0.5);
  z-index: 2;
  margin-left:-45px;
}
.venncirctop > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirctop:hover {
  z-index: 5;
  background-color: #6A6561;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(106, 101, 97, 0.9);
}
.venncirclft {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  background-color: #093d5c;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(9, 61, 92, 0.5);
  z-index: 1;
}
.venncirclft > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncirclft:hover {
  z-index: 5;
  background-color: #37688C;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(55, 104, 140, 0.9);
}
.venncircrt {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  background-color: #5e577b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(94, 87, 123, 0.5);
  z-index: 3;
  margin-left:-45px;
}
.venncircrt > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircrt:hover {
  z-index: 5;
  background-color: #625F75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(98, 95, 117, 0.9);
}
.venncircbtm {
  padding: 18px;
  width: 180px;
  height: 180px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: color 0.5s linear, background-color 0.5s linear;
  -moz-transition: color 0.5s linear, background-color 0.5s linear;
  -o-transition: color 0.5s linear, background-color 0.5s linear;
  transition: color 0.5s linear, background-color 0.5s linear;
  top: 0px;
  text-align: center;
  background-color: #627746;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(98, 119, 70, 0.5);
  z-index: 4;
  margin-left:-45px;
}
.venncircbtm > a {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: .004em;
  color: #FFFFFF;
  text-decoration: none;
}
.venncircbtm:hover {
  z-index: 5;
  background-color: #3a4e20;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background-color: rgba(58, 78, 32, 0.9);
}
.venn-container a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.venntxttop:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtrt:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtlft:hover {
  color: #FFFFFF;
  text-decoration:none;
}
.venntxtbtm:hover {
  color: #FFFFFF;
  text-decoration:none;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet" />

<div class="row-fluid">
    <div class="span12">
        <div class="venn-container">
            <div class="venncirclft">
                <a class="venntxtlft" href="#">Left</a>
            </div>        
            <div class="venncirctop">
                <a class="venntxttop" href="#">Top</a>
            </div>
            <div class="venncircrt">
                <a class="venntxtrt" href="#">Right</a>
            </div>
            <div class="venncircbtm">
                <a class="venntxtbtm" href="#">Bottom</a>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题