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

Html – I can't seem to get the #image centered within it's parent. I have tried a flexbox, but it still doesn't work

Here are the rules I have to follow:
****You should have a main element with an id of main.
***Your #img-div, #image, #img-caption, #tribute-info, and #tribute-link should all be descendants of #main.
***You should have an element with an id of title.
***:Your #title should not be empty.
***You should have a figure or div element with an id of img-div.
***:You should have an img element with an id of image.
***Your #image should be a descendant of #img-div.
***:You should have a figcaption or div element with an id of img-caption.
***:Your #img-caption should be a descendant of #img-div.
***:Your #img-caption should not be empty.
***You should have an element with an id of tribute-info.
***Your #tribute-info should not be empty.
***You should have an a element with an id of tribute-link.
***:Your #tribute-link should have an href attribute and value.
***:Your #tribute-link should have a target attribute set to _blank.
***:Your img element should have a display of block.
***:Your #image should have a max-width of 100%.
***Your #image should have a height of auto.
*****Your #image should be centered within its parent.

I am not sure what I am missing. I tried adding classes and using them to add the flexbox with align-items and justify-content.
Here is my code:

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Edgar Allan Poe</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Edgar Allan Poe</h1>
    </header>
    <main id="main">
   <div class="pic" id="img-div">
      <img  id="image" src="https://i.guim.co.uk/img/static/sys-images/Books/Pix/pictures/2009/1/19/1232367130592/Portrait-of-Edgar-Allan-P-001.jpg?width=465&dpr=1&s=none" alt="black and white portrait of Edgar Allan Poe" ><figcaption id="img-caption">Picture provided from The Guardian Website</figcaption>
    </div>
    
      <h2>A Man of Darkness</h2>
      <div id="tribute-info">
      <p>
        Edgar Allan Poe was well known for his dark and macabre literature. Stories filled with mystery and beautiful women of love. Stories filled with betrayal and death. Here is a list of his work:
      </p>
      <ul>
<li>Metzengerstein (1832)</li>
<li>A Tale of Jerusalem (1832)</li>
<li>Ms. Found in a Bottle (1833)</li>
<li>Shadow (1835)</li>
<li>Morella (1835)</li>
<li>Berenice (1835)</li>
<li>The Unparalleled Adventures of One Hans Pfaall (1835)</li>
<li>King Pest (1835)</li>
<li>Four Beasts in One - The Homo-Cameleopard (1836)</li>
<li>Ligeia (1838)</li>
<li>A Predicament (1838)</li>
<li>William Wilson (1839)</li>
<li>The Devil in the Belfry (1839)</li>
<li>The Journal of Julius Rodman (1840)</li>
<li>The Man of the Crowd (1840)</li>
<li>A Descent into the Maelstrom (1841)</li>
<li>Never Bet the Devil Your Head (1841)</li>
<li>The Pit and the Pendulum (1842)</li>
<li>The Masque of the Red Death (1842)</li>
<li>and more...</li>
      </ul>
     <h3> For a continued list of his works visit <a target="_blank" id="tribute-link" href="https://www.addall.com/books-in-order/edgar-allan-poe/"> ADDALL</a></h3>
      </div>
    </main>
  </body>
  </html>

STYLES.CSS

body {
  background-color: #ffe4e1;
}
.pic {
  background-color: #d8bfd8;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 3px;
  border: 2px solid black;
  display: block;
  align-items: center;
}
main {
  text-align: center;
}

h1, h2 {
  text-align: center;
  font-family: Cursive;
}

p{
  font-family: Sans-serif; 
}

ul {
  text-align: left;
}

`

I have tried adding display: flex; with align-items: center; and justify-content: center; to various classes and selectors. I either change the entire code and cause it to "break" or nothing at all changes. I don’t know how else I can get that last statement.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Oh my goodness I did it! It was a matter of moving some things around and adding a flex-wrap: wrap;

    Here is what I changed and my code ran perfectly.

    .pic {
background-color: #d8bfd8;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
flex-wrap: wrap;
}
img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 3px;
  border: 2px solid black;
  display: block;
}

    Thank you to those of you who answered my question. I appreciate it!


  2. 0

    Your code does center the image for me (horizontally). But anyhow, I would suggest some improvements.

    • wrap image and caption in a figure element
    • then you can center them both together
    .pic {
  display: flex;
  justify-content: center;
  background-color: #d8bfd8;
}

figure {
  margin: 0;
}
    <div class="pic">
  <figure>
    <img src="https://i.guim.co.uk/img/static/sys-images/Books/Pix/pictures/2009/1/19/1232367130592/Portrait-of-Edgar-Allan-P-001.jpg?width=465&dpr=1&s=none" alt="black and white portrait of Edgar Allan Poe">
    <figcaption>Picture provided from The Guardian Website</figcaption>
  </figure>
</div>

    If you want to center the caption, try this:

    figcaption {text-align: center;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search