如何使用 css/bootstrap 将圆圈定位在圆圈中？答案

【问题标题】：How do I position circles in a circle with css/bootstrap?如何使用 css/bootstrap 将圆圈定位在圆圈中？
【发布时间】：2018-03-21 23:21:21
【问题描述】：

我想知道如何在一个圆圈内定位圆圈/图像。我尝试通过将它们放在容器中并围绕圆圈旋转它们来定位它们，但我不知道如何使其如下图所示：

.deg1 {
  transform: rotate(270deg) translate(6em) rotate(-270deg);
  top: 50px;
  position: relative;
}


/* 1 */

.deg2 {
  transform: translate(6em);
}


/* 2 */

.deg3 {
  transform: rotate(45deg) translate(6em) rotate(-45deg);
}


/* 3 */

.deg4 {
  transform: rotate(135deg) translate(6em) rotate(-135deg);
}


/* 4 */

.deg5 {
  transform: translate(-6em);
}


/* 5 */

.deg6 {
  transform: rotate(225deg) translate(6em) rotate(-225deg);
}


/* 6 */

.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

首先，我尝试在 bootstrap 的文档中搜索可以提供帮助的内容，所以我只是这样做了，但无法弄清楚。

【问题讨论】：

请显示您的 HTML
我的错。不认为html是必要的。更新
欢迎来到 Stack Overflow！寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.
谢谢。我更新了它以提供一个明确的问题，包括复制所需的所有代码。
%= image_tag "goldwind.png" % 使其无法重现该问题，但无论如何......有几种方法可以解决这个问题......而且它们都没有使用引导程序。为什么要为此使用引导程序？

标签： html css css-transforms

【解决方案1】：

没有translate和transform，你甚至可以只使用top,left,'bottom'和'right'来定位。

请务必使用px，因为如果您使用% 值，它将中断。

您需要根据您的图像进行一些修改。

// .deg1 {
//   transform: rotate(270deg) translate(6em) rotate(-270deg);
// } /* 1 */
// .deg2 {
//   transform: translate(6em);
// } /* 2 */
// .deg3 {
//   transform: rotate(45deg) translate(6em) rotate(-45deg);
// } /* 3 */
// .deg4 {
//   transform: rotate(135deg) translate(6em) rotate(-135deg);
// } /* 4 */
// .deg5 {
//   transform: translate(-6em);
// } /* 5 */
// .deg6 {
//   transform: rotate(225deg) translate(6em) rotate(-225deg);
// } /* 6 */
.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

.center img {}

.deg1 img {
  position: relative;
  top: 100px;
}

.deg2 img {
  position: relative;
  bottom: 100px;
}

.deg3 img {
  position: relative;
  top: 50px;
  left: 85px;
}

.deg4 img {
  position: relative;
  top: 50px;
  right: 85px;
}

.deg5 img {
  position: relative;
  bottom: 50px;
  right: 85px;
}

.deg6 img {
  position: relative;
  bottom: 50px;
  left: 85px;
}

<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

【讨论】：

【解决方案2】：

我会使用 Javascript/jquery 来设置每个外圈的位置。

Jquery 无耻地从 ThiefMaster♦ 盗取，他们在 Q & A 上的回答

var radius = 50; // adjust to move out items in and out 
var fields = $('.container div'),
  container = $('.container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

body {
  display: flex;
  height: 100vh;
  overflow:hidden;
}

.container {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid grey;
  background: #f00;
  animation: spin 3s infinite linear
}

.container div {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
}

.container div:first-child {
  background: blue;
}

@keyframes spin {
  100% {
    transform: rotate(1turn)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

【解决方案3】：

您可以尝试调整一些边距和容器的宽度，然后不需要复杂的变换：

.circle-container {
  position: relative;
  width: 12em;
  height: 12em;
  border:1px solid;
  border-radius: 50%;
  margin: 0.75em auto 0;
  transform:rotate(90deg);
}

.circle-container a {
  display: inline-block;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: blue;
  margin:-0.3em -0.1em;
}
a:first-child,
a:nth-child(6) {
  margin-left:2em;
}
a:nth-child(1),a:nth-child(2) {
  margin-top:0.3em;
}

<div class='circle-container'>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</div>

【讨论】：

【解决方案4】：

您可以只使用 CSS 来定位元素。例如，这是一个使用 CSS 网格的示例。

我已将网格声明为 6 行 x 6 列，以便定位元素，使角为空。

.circle-container {
  width: 24em; height: 24em;
  border-radius: 50%;
  border:2px solid red;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.circle-container a {
    display: block;
    border:2px solid grey;
    background:white;
    border-radius:50%;
    text-align:center;
}

.deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */
.deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */
.deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */
.deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */
.deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */
.deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */
.deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */


/*bring the lateral circles closer to the center*/
.deg2, .deg5{margin:0 -1em 0 1em;}
.deg3, .deg6{margin: 0 1em 0 -1em}

body{
  background:steelblue;
}

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

如果你不想使用 CSS 网格（可能是因为 IE11），你也可以使用任何你喜欢的类似网格的技术，可能是浮动、内联块，甚至可能是 flexbox，将元素定位在三行中并推送放下旁边的那些。

这里是 display:inline-block，通常会返回

123
456
7

还有一些变换来弥补这一点

.circle-container {
  width: 240px; height: 240px;
  border:2px solid red;
  font-size:0;/*typical inline-block whitespace hack*/
  border-radius:50%;
}
.circle-container a {
    display:inline-block;
    width:calc(100% / 3);
    height:calc(100% / 3);
    border:2px solid grey;
    background:white;
    text-align:center;
    font-size:1rem;
    border-radius:50%;
}
.deg1, .deg3, .deg4, .deg6{
  transform:translateY(50%);
}

.deg7{
  transform:translateX(100%)
}

body{
  background:steelblue;
}
*{box-sizing:border-box; margin:0; padding:0;}

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

【讨论】：