Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I am trying to solve the very last task of the Tribute Page Certification Project - centering my img element within its parent element. But I cant wrap my head around it. Grateful for any help!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
  <main id="main">
    <title id="title">Nathan Alexander Shuftan</title>
    <div id="img-div">
      <img id="image">
      </img>
      <figure>
      <figcaption id="img-caption">Caption</figcaption>
      </figure>
      <h2 id="tribute-info">Title of this work
      </h2>
      <img>
      <a id="tribute-link" href="https://de.wikipedia.org/wiki/Held" target="_blank"></a>
      </img>
      <div id="img-caption"></div>
    </div>
    </main>
    

/* file: styles.css */
#image{
max-width: 100%;
height: auto;
display: block;
text-align: center
}

.div{
  align-items: center
}

.div #image{
  height: 100%;
  width: auto
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Challenge Information:

Tribute Page - Build a Tribute Page

2

What error is showing in the console, when you run your code?
@julia3

3

Remove the img closing tag from your html. That’s didn’t need.

4

Your link and title should be within head opening and closing tags.

5

Your all main content should goes within body element.

6

Here’s another extra and wrong img tag.

7

You should practice again from start.

8

Hi, thank you very much for your support!
It says: Your #image should be centered within its parent.
All the other tasks are complete. Still not sure what to do.

9

Any element can be centered by margin property with the value left right auto. Also with display flex, justify content, align items center.

But first you need to code your html and css correctly.
@julia3

10

To center an image within its parent element, you can use CSS. Here are a few methods:

  1. Using Flexbox:

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

  2. Using Grid:

    .parent-element {
    display: grid;
    place-items: center;
}

  3. Using Margin Auto:

    .img-container {
    text-align: center;
}

.img-container img {
    margin: 0 auto;
}

  4. Using Absolute Positioning:

    .parent-element {
    position: relative;
}

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Choose the method that best fits your layout and requirements.

11

To center the image within its parent element, you can make a few adjustments to your CSS:

.div {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

#image {
  max-width: 100%;
  height: auto;
}

Explanation:

  • By setting the parent element’s display to flex, and using justify-content and align-items with a value of center, you ensure that the image is both horizontally and vertically centered within its parent element.
  • You don’t need to specify display: block; for the image since it’s already the default behavior for images.
  • The max-width and height:auto properties ensure that the image scales appropriately while maintaining its aspect ratio.
12

Dear @hasanzaib1389 , thank you so much for your help, I now solved it! I really re-wrote the whole code and googled some more. Thank you.

13

Your most welcome. That’s good, keep it up :+1:

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.