将两个居中的div放在一起

Question

如何将两个居中的div放在一起，两者之间有一些填充？我试过display: inline，但这似乎不起作用。

.my-container {
  position: relative;
  text-align: center;
  color: red;
  width: 20%;
  margin: auto;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: blue;
}

<div class="my-container">
  <img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
  <div class="centered">text</div>
</div>
<div class="my-container">
  <img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
  <div class="centered">text 2</div>
</div>

（注意：我也在寻找一种方法让蓝色文字 - 椭圆形成一个圆圈，但我认为这是一个不同的问题。）

Answer 1

您应该将display: inline-block;添加到my-container课程。

  .my-container {
    position: relative;
    text-align: center;
    color: red;
    width: 20%;
    margin: auto;
    display: inline-block;
  }

  /* Centered text */

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: blue;
  }

<div class="my-container">
  <img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
  <div class="centered">text</div>
</div>
<div class="my-container">
  <img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
  <div class="centered">text 2</div>
</div>

Answer 2

在display:inline-block中使用.my-container将它们并排排列......

此外，您需要将.my-container div包装到包含text-aign:center的包装div中，以将内部内联项目与中心对齐

＆＃13;

＆＃13;

.wrapper {
  text-align: center;
}

.my-container {
  position: relative;
  text-align: center;
  color: red;
  width: 20%;
  margin: auto;
  display: inline-block;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: blue;
}

＆＃13;

<div class="wrapper">
  <div class="my-container">
    <img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
    <div class="centered">text</div>
  </div>
  <div class="my-container">
    <img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
    <div class="centered">text 2</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;