I can not make my image center to its parent element

HTML-CSS
1

Here is my code HTML:

<div id="main">
  
 <h1 id="title">
   Artisan Glass and Design
  </h1>
  <h2> Founded, owned, and operated by Robert Alison King </h2>
  <div id="img-div">
    <a href= "https://www.artisanglassdesign.com/" target = "_blank" id="tribute-link">  
    
    <img id= "image" src ="https://static.wixstatic.com/media/e264b5_facada095b094a05aeab1de4fb1eb2fc~mv2.png/v1/fit/w_2500,h_1330,al_c/e264b5_facada095b094a05aeab1de4fb1eb2fc~mv2.png" alt = "artisan glass and design logo">
    </a>
  <figcaption id= "img-caption"> Artisan Glass and Design Logo </figcaption>
</div>
  
  <p id="tribute-info">
 Artisan Glass and Design was founded by Robert King in 1985 as "Custom Glass Graphics."<br> He grew the company and became a California licensed contractor in 1992, later changing the name to Custom Glass And Mirror.<br> This is when Custom Glass and Mirror began to start doing commercial and hospitality installations.<br> In 1996 Robert King decided to take on a partnership with a former customer of his, eventually growing Custom Glass and Mirror to a 4 million dollar company in 8 years.<br>In 2005 Robert King decided to sell his company for two million dollars and opened the Artisan Glass and Design we all know today growing it into a 20 million dollar company.<br>Hard Work, Quality, Guts, and Perserverance is a motto that the whole Artisan team lives by!   </p>
  
  
 
 
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

CSS:  `body {
  background: linear-gradient(30deg, #CCFFFF, #FFCCCC); 
  text-align:center;
}


h1 {
  font-family: Sans-serif;
  font-size: 50px;
  color: #1E90FF ;
  text-align:center;
  
}
h2{
  color: #1E90FF;
  text-align:center;
}
#image {
 height:auto;
  max-width:100%;
  display:block;
  
  
}

#img-caption {
  font-family: Sans-serif;
  color: #1E90FF;
    text-align:center;

}
#tribute-info{
  font-family: Helvetica;
  text-align:center;
}
#tribute-link {
  font-size: 20px;
    text-align:center;
}
2

Hi @besco !

Welcome to the forum!

If you google,
How to center an image CSS you will get the answer you are looking for :grinning:

3

hello @besco ,

Try applying a margin property to your image id

4

I did and it gave me what I am using currently in #image

5

The first google result gave me this
Did you see this result?
https://www.w3schools.com/howto/howto_css_image_center.asp

Because it uses the margin property like was mentioned earlier

6

I did and it is still not working, when i add “display: block;” it puts my image to the left?

7

Display block is correct.
You need to add the margin property.

8

I used that and now it is saying my element will not responsively resize when i run the test.

9

You’ll find your answer in the link @jwilkins.oboe shared.

1 Like
10

Can we see your updated code?

11 
body {
  background: linear-gradient(30deg, #CCFFFF, #FFCCCC); 
  text-align:center;
}


h1 {
  font-family: Sans-serif;
  font-size: 50px;
  color: #1E90FF ;
  text-align:center;
  
}
h2{
  color: #1E90FF;
  text-align:center;
}
#image {
 display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  
    
    
}

#img-caption {
  font-family: Sans-serif;
  color: #1E90FF;
    text-align:center;

}
#tribute-info{
  font-family: Helvetica;
  text-align:center;
}
#tribute-link {
  font-size: 20px;
    text-align:center;
}
12

Ok, so we don’t want you to delete anything.

We just wanted you to add the margin property to what you already had here.

Make sense?

1 Like
13

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

14

Yes thank you so much. That little problem took me much longer to fix then it did to write the entirety of the code. I appreciate you guys a ton.

2 Likes
15

Okay thank you a ton. My mistake.

16

No worries, you’re good

1 Like
17

While you are here, what is the difference between inline-block and block. I googled but i am still a bit confused.

18

Inline-block is similiar to inline elements but with inline-block you can add padding and margin to all for 4 sides.

With inline you can only add padding and margin to left and right, not top and bottom.

You could use inline block for navigations links for example.

That way you could have all of the links on one line and adding padding or margin on all sides.

And then block level just starts a new line and fills up the whole space horizontally.
So divs, p tags are block level.

19

So with my previous question why did only block work, as oppose to inline-block

20

With inline-block, you can still add elements next to it.
But with block level, it takes up the whole space horizontally so that is why you can center it in the middle of the page because there are not other potential elements that can be next to it.

1 Like