Help Center image with parent/Tribute Page

#img-div {
max-width: 300px;
padding: 10px;
position: center;

#image {
max-width: 300px;
padding: 10px;
box-shadow: 10px 0px 20px;
display: block;

#img-caption {
text-align: center;
color: #c2760b;
display: center;

<figure id="img-div">
  <img id="image" src="......" alt="Respiratory care practitioner managing ICU patient and ventilator" style="width:100%">
  <figcaption id="img-caption">ICU Respiratory Therapist working with patient</figcaption>

Try setting

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

I just finished mine and I think that worked for me

Thanks for you looksie! It didn’t work. Plus the image is huge. Maybe thats the prob? idk. will look for another I suppose.

Do not exist this properties: display: center and position: center
If you want to center a block:

  • its parent does not have display: flex --> set margin left and right is auto
  • its parent is display: flex --> do not set margin auto for it, but set parent has justify-content: center;

I tried what I could understand. Bit tired. Will look at it again tomorrow. Thanks!

Make sure your diplay is set to block.

diplay: block;

1 Like