Centering an element with another element next to it-CodePudding

What I'm trying to do is to have a text element centered, and then have an image just next to it.

Above is what I want to achieve, however it is done with position: absolute; and some really weird positioning values, that of course is not responsive and looks really weird. My problem is I can only get the parent element centered, not the text only. The image must also be aligned just next to the text.

I've been searching for hours and can't seem to find a solution, but I'm sure it's such a simple fix. Thank you!

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

Code examples:

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

CodePudding user response：

I would do it a bit simpler:

Center the h2 text by making it an inline-block inside a regular div (no flex) that has text-align: center.

Then put the image into the h2, apply position: relative to the h2 (= anchor for absolutely positioned children) and position: absolute to the image, which positions it in relation to the h2. Now you just have to choose negative top and right values (to move it outside the parent) that relate to the image size - see below.

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

CodePudding user response：

Try something simple like this:

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

CodePudding user response：

You might play with margins in 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;
}

.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 centered</h2><img src="https://www.freeiconspng.com/uploads/cute-rabbit-png-12.png" class="rabbit_flexbox">
</header>

CodePudding user response：

It's a simple trick. First you should put the img inside the h2 and set position:absolute on the image

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

This way you can center the text in h2 using flexbox and the img will always stick to the side of the text