将两个居中的 div 并排放置 [重复]答案

【问题标题】：Put two centered divs next to each other [duplicate]将两个居中的 div 并排放置 [重复]
【发布时间】：2018-03-15 19:47:43
【问题描述】：

如何将两个居中的 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>

（注意：我也在寻找一种方法使蓝色文本省略一个圆圈，但我想这是一个不同的问题。）

【问题讨论】：

标签： html css

【解决方案1】：

在您的.my-container 中使用display:inline-block 将它们并排对齐...

您还需要将 .my-container div 包装到带有 text-aign:center 的包装器 div 中，以将内部内联项对齐到中心

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

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

【讨论】：

【解决方案2】：

您应该将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>

【讨论】：

但是现在 div 不是居中对齐的。
@lolbas inner content 你指的是什么？
看错了 DOM，编辑了评论。