HTML CSS How to center elements using image as center point

How can one effectively center all elements on a webpage, including text, by utilizing an image as the horizontal reference point, with additional text strategically positioned to its right for optimal alignment?

My current code:

.container {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.title {
  margin-bottom: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

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

.item-image {
  height: 50px;
  width: 50px;
  margin-right: 10px;
}

.item-text {
  text-align: left;
  margin: 0;
}

<div class="container">
  <h2 class="title"><b>Div Title</b></h2>

  <div class="item">
    <div class="item-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" class="item-image">
      <div class="item-text">
        <p>Title 1</p>
        <p><b>Subtitle 1</b></p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" class="item-image">
      <div class="item-text">
        <p>Title 2</p>
        <p><b>Subtitle 2</b></p>
      </div>
    </div>
  </div>
</div>

Thanks for your help beforehand..

Solution

For your case, you don't need to add further css.

If you want to center both the image and the subtitle below the title, you can actually modify your HTML structure to have the title above both the image and the subtitle:

<div style="padding: 20px; border-radius: 10px; text-align: center;">
    <h2 style="margin-bottom: 20px;"><b>Div Title</b></h2>

    <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; width: 200px; margin-left: auto; margin-right: auto;">
      <p style="margin: 0;">Title 1</p>
        <div style="display: flex; align-items: center; justify-content: center;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" style="height: 50px; width: 50px; margin-right: 10px;">
            <div style="text-align: left;">
                <p style="margin: 0;"><b>Subtitle 1</b></p>
            </div>
        </div>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; width: 200px; margin-left: auto; margin-right: auto;">
      <p style="margin: 0;">Title 2</p>
        <div style="display: flex; align-items: center; justify-content: center;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" style="height: 50px; width: 50px; margin-right: 10px;">
            <div style="text-align: left;">
                <p style="margin: 0;"><b>Subtitle 2</b></p>
            </div>
        </div>
    </div>
</div>

Your p (or title element) tag is a display block (by default), this is causing the drop line:

For more info you can check The Paragraph element