将一个元素与它旁边的另一个元素居中

Question

我想要做的是让一个文本元素居中，然后在它旁边放一个图像。

以上是我想要实现的，但是它是用 position: absolute; 和一些非常奇怪的定位值完成的，这当然没有响应，看起来真的很奇怪。我的问题是我只能让父元素居中，而不仅仅是文本。图片还必须紧挨着文字对齐。

我已经搜索了几个小时，但似乎找不到解决方案，但我确信这是一个非常简单的解决方案。谢谢！

Codepen: https://codepen.io/sigurdmazanti/pen/gOxMBem

代码示例：

* {
  font-size: 30px;
  font-weight: normal;
}

p {
  text-align: center;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h2 {
  text-align: center;
}

img {
  width: 200px;
  height: 200px;
}

.rabbit_absolute {
  position: absolute;
  right: 540px;
  top: 20px;
}

<p>This text is centered</p>

<!-- position absolute -->
<header>
  <h2>This text is centered</h2><img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit_absolute">
</header>

<!-- regular flexbox -->
<header>
  <h2>This text is not centered</h2><img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit_flexbox">
</header>

Answer 1

尝试像这样简单的事情：

    * {
      font-size: 30px;
      font-weight: normal;
    }

    .cntr {
      display: flex;
      justify-content: center;
      align-items: center;
    }


    img {
      width: 50px;
      height: 50px;
    }

    <header>
      <div class="cntr">
        <h2>This text is centered</h2>
        <img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit_absolute">
      </div>
    </header>

Answer 2

您可能会在 flexbox 中使用边距：

* {
  font-size: 30px;
  font-weight: normal;
}

p {
  text-align: center;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h2 {
  text-align: center;
  margin:0 50px;
}

img {
  width: 50px;
  height: 50px;
  margin:0 0 0 -50px;
}

<p>This text is centered</p>

<header>
  <h2>This text is centered</h2><img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit_flexbox">
</header>

Answer 3

我会做的简单一点：

将 h2 文本置于具有 text-align: center.

的常规 div（无 flex）中的 inline-block 居中

然后将图像放入 h2，将 position: relative 应用于 h2（= 绝对定位子项的锚点）和 position: absolute 到图像，它相对于 h2 定位它。现在您只需选择与图像大小相关的负 top 和 right 值（将其移动到外部父级） - 见下文。

* {
  font-size: 30px;
  font-weight: normal;
}
header {
  text-align: center;
}

h2 {
  display: inline-block;
  position: relative;
}

img.rabbit {
  width: 50px;
  height: 50px;
  position: absolute;
  right: -50px;
  top: -10px;
}

<header>
  <h2>This text is centered<img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit"></h2>
</header>

Answer 4

这是一个简单的技巧。首先你应该把 img 放在 h2 里面并在图像上设置 position:absolute

Html:

    <header>
      <h2>This text is centered<img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit">
    </h2></header>

css:

    header{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rabbit{
      position: absolute;
    }

这样您就可以使用 flexbox 将文本居中 h2 并且 img 将始终贴在文本的一侧

将一个元素与它旁边的另一个元素居中

Centering an element with another element next to it

css

position

flexbox

responsive-design