Question

如何创建如下所示的圆圈：

应保持文本居中对齐。

到目前为止，我所尝试的是：

创建一个这样的圆圈，并将左边距设为负值并计算它。但是我没有将圆圈保持在两端切割并且中心对齐。圆圈的宽度应该是固定的，调整大小时应该从左右均匀切割。

.circle {
  -moz-border-radius: 550px/550px;
  -webkit-border-radius: 550px 550px;
  border-radius: 550px/550px;
  width: 550px;
  height: 550px;
  overflow: hidden;
  transition: all 1s ease-out;
  margin-top: 90px;
  margin-left: calc((100% - 515px)/2);
}

Answer 1

这是你想要的吗？

#circle_container
{
  width: 300px;
  height: 400px;
  overflow: hidden;
  background-color: #0c0c0a;
}
#circle
{
  border: 5px solid #3ecf8e;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border-radius: 100%;
  text-align:center;
  position: relative;
  left: -50px;
}
#circle h2
{
  margin: 0;
  font-size: 25px;
  color: #3ecf8e;
  line-height: 400px;
}

<div id="circle_container">
    <div id="circle">
       <h2>Some Text</h2>
    </div>
</div>

Answer 2

也许使用一些flexbox：

.parent {
  overflow: hidden;
  width: 300px;
  height: 400px;
  background-color: #333;
}

.child {
  width: 150%;
  margin-left: -25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid yellow;
  border-radius: 50%;
  color: #FFF;
}

<div class="parent">
  <div class="child">
    <h1>Header</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

Answer 3

如果您正在寻找响应式圈子，可以像这样创建：

html：

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <div class="circle"></div>
</div>

</body>
</html>

CSS：

.container {
  width: 20%;
  height:300px;
  background: #000;
}

.circle {
  border: 2px solid #fff;
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
}

Answer 4

我为你做了 Fiddle

基本上，这个html：

<div class="container">
  <div class="circle"></div>
  <div class="text">Your text here</div>
</div>

我添加了一个简单的jquery函数，如：

var aa = $('.circle').outerHeight();
var bb = $('.container').outerWidth();
$('.circle').css("width", aa).css("left", -((aa / 2) - (bb / 2)));

通过这种方式，您可以为container选择任何高度或宽度，完美circle将始终位于容器中间，只要{{1} height就会裁剪两侧容器＆gt; width可以帮助您了解项目的响应能力

var aa = $('.circle').outerHeight();
var bb = $('.container').outerWidth();
$('.circle').css("width", aa).css("left", -((aa / 2) - (bb / 2)));

* {box-sizing:border-box;}
.container {
  height:600px;
  width:400px;
  background-color:#000;
  position:relative;
  overflow:hidden;
}
.circle {
  border:3px solid yellow;
  border-radius: 50%;
  height: 100%;
  position:absolute;
  top:0;
  left:0px;
  margin:auto;
}
.text {
  background-color:orange;
  height:50%;
  width:80%;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="circle"></div>
  <div class="text">Your text here</div>
</div>

根据需要更改容器尺寸。

已编辑：如果您的示例将成为自适应模块，您可以查看 FIDDLE （更改widnow面板的宽度）

Answer 5

有一种标准技术可以让圆圈自动居中

通过以下属性实现：

  left: 50%;
  transform: translate(-50%);

这会将元素的左边放在父元素的中心，然后将元素的一半移到左边

#circle_container
{
  width: 300px;
  height: 400px;
  overflow: hidden;
  background-color: #0c0c0a;
}
#circle
{
  border: 5px solid #3ecf8e;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border-radius: 100%;
  text-align:center;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
#circle h2
{
  margin: 0;
  font-size: 25px;
  color: #3ecf8e;
  line-height: 400px;
}

<div id="circle_container">
    <div id="circle">
       <h2>Some Text</h2>
    </div>
</div>

如何使用css创建一个固定宽度的圆，该css在中心对齐并在边缘处切割？

5 个答案: