堆棧內存溢出
  簡體   English   中英

HTML / CSS-並排重疊的圓圈

[英]HTML/CSS - Side-by-side overlapping circles

 原文  2019-04-30 08:55:24  8   2    html/ css

問題描述

我正在嘗試制作4個重疊的圓圈，每個圓圈的中間居中對齊（類似於PowerPoint SmartArt）。 我在網上找到了一個示例 ，並能夠對其進行修改以使圓並排，但是文本仍未正確對齊：

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 個解決方案

解決方案1
 1  2019-04-30 09:02:53

從.venntxtlft ， .venntxtrt ， .venntxtbtm ， .venntxttop刪除margin ， width和top css值，然后將以下內容添加到CSS 

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

解決方案2
 1 已采納  2019-04-30 09:32:05

更新您的代碼，不使用position:absolute ，使用margin-left:-45px ，使用垂直和水平margin-left:-45px 

.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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS並排Divs CSS並排划分 創建並排圖像時出現問題（純HTML / CSS） 嘗試通過HTML / CSS中的鏈接並排獲取3張圖像 想要並排重疊的Divs CSS：兩個，divs並排 CSS-並排Divs繼承高度嗎？ CSS-自適應並排圖像 使用 CSS 的並排塊 HTML表格（並排）不適用於巨型機
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM