HTML/CSS - 并排重叠的圆圈-6ren

HTML/CSS - 并排重叠的圆圈

转载作者：太空宇宙更新时间：2023-11-04 00:51:02

我正在尝试制作 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;
}

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

最佳答案

在没有 position:absolute 的情况下更新您的代码，使用 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>

关于HTML/CSS - 并排重叠的圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55917279/

文章推荐： c - 如何跨越指针？

文章推荐： c - 导致段错误的简单C程序

文章推荐： c++ - 使用 `\` 符号的 cpp 中的 #define 语法不清楚

java - 在路径上移动对象(圆圈)
我需要移动一个对象，在我的例子中是给定路径上的一个字符串。实际上路径可以是半圆。如附图所示，字符串应该出现在另一个物体的后面，沿着路径移动并消失在第二个物体(两个图像)后面。我不知道如何开始...希望
内部带有动态文本的 CSS 圆圈
我需要构建一个圆形(在 css 中)，它有 2 行文本，可以根据选择的翻译改变长度并始终居中。到目前为止我有这个: h3 { background-color: #fcd141; borde
带文字换行的 CSS3 圆圈
是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆，同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文
带有文字覆盖在图像上的 css 圆圈
我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。我几乎用正方形 div 做对了，但是一旦我将图像放入组合中，圆圈就会移动到图像下方。我的代码。 .Container { w
html - 圆圈/圆盘中的中心对齐图标
使用 CSS，我有一个将图标放置在圆圈/圆盘中的显示。这是我的例子: 但我很难将图标放在圆圈/圆盘的中心。我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Googl
带有内联文本的 CSS 圆圈
我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时，圆圈是内联的，但我无法添加任何文本。当我使用 circle class 到 div 时，我可以添加文本，但
Android如何在按下按钮时使ProgressBar(圆圈)覆盖全屏？
我尝试在单击“提交”按钮时显示 ProgessBar。它会在数据加载完成时隐藏。但是，progressBar 没有覆盖整个屏幕。相反，它被按钮覆盖。请引用屏幕截图，它应该更容易理解我的意思。我要实现
具有两个不同颜色或至少看起来像的边框的 CSS 圆圈
这个问题在这里已经有了答案: Circle with two borders (4 个答案) 关闭 7 年前。我有一个只有一个边框的圆圈，但我想知道是否有办法实现一个有两个不同颜色边框的圆圈。我有
带有镶嵌边框的 CSS 圆圈
我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈: 我有以下 HTML 和 CSS，但它没有产生我需要的效果: .inlay-circle { width: 15rem; heig
带边框的 CSS 圆圈
我找到的每个指南都有相同的线条和填充颜色。我想要的只是一个带有红线和白色填充的圆圈。我试过: .circle { border: red; background-color: #FF
html - 添加颜色和图像以填充 SVG 圆圈
我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。我现在尝试的是使用这段代码: 它用我的背景图片绘制
javascript - 如何向每个用户显示自定义数量的 SVG 圆圈？
我目前正在组建一个将托管用户的网站。每个用户都会有一个个人资料页面，该页面将显示 SVG 圆数组，每个用户在数据库的用户表中自己的行中也有一个相应的 SVG_number。例如，如果 User1 在
javascript - 无法成组创建 svg 圆圈
我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。 var circleA = [ [50,48],[106,35]
javascript - SVG 圆圈、文本或线条上的可点击链接
使用 snapsvg.io，我想知道是否可以添加可点击的链接，例如 My Link标记到 SVG 文本、圆圈或线条。我这里的一个例子是文本: var s = Snap("#svg"); var te
java - 随机游走者(圆圈)比其他轴更频繁地向上移动
所以这是我的一个小项目，只是为了好玩。我尝试使用 libgdx 在 Java 中重新创建随机 Walker。现在我认为我的代码非常成功，因为它工作正常(也许)。但是有一个问题，圆比其他轴更倾向于向
css - 创建与垂直线和水平线相连的 CSS 圆圈
我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像？
javascript - 如何在标签内附加 SVG 圆圈
以下圆形标签位于标签内: 现在我必须将生成的圆圈附加到标签内，例如更新: function createCircle(a) { var circle = document.
javascript - 在切片中填充一个 javascript 圆圈
我希望圆圈类似于饼图，具有相同的不同颜色切片。出于某种原因，我画了一个圆，在带有颜色的一侧有弧形，中间有一个白色八边形。 for(var i=0;i<8;i++){ ctx.beginPath
javascript - Highcharts 中样条图中的标记/圆圈
我有一个场景，我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表，图表的代码如下。我的输出应该如下所示。我已经在图像中标记了预期的圆圈: $(function ()
Python Networkx 检测循环/圆圈
给定以下示例: 是否有可能检测到网络中的环路 (I1, I2,I3, C6, C7, I5)？我试过:simple_cycles → 它适用于 3 个节点，但不能超过 3 个。我需要检测包含所有节

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML/CSS - 并排重叠的圆圈