Question 214324 in Html Question posted in
Some basic documentation can be found here.

Html – Replacing one text character in a word with an image and centering properly

I am creating a website and I am trying to insert this black image in the place of an O in the title, but when I am coding it, the image is not centered and embedded in the middle of the word properly
.
`

<section id="home">
    <h1>Pand<img src="assets/webstuff/pandoraxOpng-removebg-preview.png" style="length: 300px; width: 300px; object-position: 5, 5">rax</h1>
    <p style="text-align: center; font-size: 125%">Unleashing your true potential.</p>
  </section>

`

this is what I’m trying to get

this is the result I am getting

Tags:

2

Answers


  1. 0

    You can add display: flex on the section and then set the flex-direction to column. This will make the two elements inside your section stack on top of each other. Then add align-items: center to center the H1 and P elements within the section element.

    #home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
    <section id="home">
  <h1>
    <span>Pand</span>
    <img src="assets/webstuff/pandoraxOpng-removebg-preview.png" style="length: 300px; width: 300px; object-position: 5, 5" />
    <span>rax</span>
  </h1>
  <p style="text-align: center; font-size: 125%">Unleashing your true potential.</p>
</section>
    Login or Signup to reply.
  2. 0

    It’s better to use Flexbox for such cases. The code is explained in the comments.

    .home {
   text-align: center; /* center section */
}

.home h1 {
   font-size: 36px; /* font size - adjust as needed */
   display: flex; /* use flex */
   align-items: center; /* center image vertically */
   justify-content: center;  /* center image horizontally */
}

.home h1 img {
   height: 100px; /* image height - adjust as needed */
   width: 100px; /* image width - adjust as needed */
   margin: 0 5px; /* space between words */
}
    <section class="home">
    <h1>Pand <img src="https://picsum.photos/100" /> rax</h1>
    <p>Unleashing your true potential.</p>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search