Selectors, again

I’m having the most trouble with selectors, as always I have W3 cheatsheet open beside me.

Here’s my page All I want is my image to be center but I can’t do it without selecting the below. The issue is that by selecting the div, it applies to everything within the div.

How can I select just the image and center it with the border radius without the it effecting everything.

An explanation why would be great also, I’m assuming the ‘img’ being an inline-element has no measurements to go by where as the div is the full page so the div gives the .welcomepic those measurements.

Would I need to enclose the img in another div?

Thanks

/* This one */
div,.welcomepic {
  text-align: center;
  border-radius: 50px;
}
/* This one */

#welcome-section .welcomepic {
display:block;
margin:auto;
border-radius: 50%;
}

put this code, what I did is that by setting its display block it will have full width and due to margin auto it will be in center

1 Like

image


kindly see the difference

1 Like

Thank you, very helpful and worked. =} I need to start using display:block more!