Search code examples
cssimagecentermargin

Centering an undefined but specific <img> tag with CSS?

I'm working with a WordPress plugin and I don't want to manually change the plugin code, but I've run into a bit of a problem.

<div id="comic">
 <img src="link.to/image.jpg">
<div>

For some reason any attributes I throw into the div won't center the image (margin: auto; text-align: center;) but I was playing around with the Inspect Element feature of Chrome and can manage to get it centered by tagging img with "margin: auto;".

The problem is, I can't add an id or class to the image because it's embedded into the plugin. Is there any way to add CSS to the undefined tag, like maybe effecting all the images under the comic id?

Edit: I don't want to affect all of my image tags either, just this specific one.

Solution

  • You can do css mapping. Look at all the parents and find one with a class you can handle, then map it down appropriately For instance:

    div class = grandparent
  ul 
    li
      a
        img

    can be targetted as 

     /*to affect only the one directly under this parent class */
 div.grandparent > ul > li > a > img {
      margin:0 auto;
 }

 /*to affect all under this parent class */
 div.grandparent ul li a img {
      margin:0 auto;
 }