• When I insert images into posts the vertical ones are not centered even with <img class="aligncenter added.

    Example here, 3rd image: http://eyewonderphotography.com/jessica-brandon-maternity/

    My other sites dont have that problem but I havent been able to figure out what it is in my css causing the issue.

    Appreciate any help! Thanks

    Here is whats under my Image section:

    .featureimg {
    	display: block;
    	text-align: center;
    	line-height: 0;
    	}
    img.centered {
    	display: block;
    	margin: 12px auto 12px;
    	padding: 0px;
    	}
    img.alignnone {
    	padding: 0px;
    	margin: 12px 0px;
    	display: inline;
    	}
    img.alignright {
    	padding: 0px;
    	margin: 12px 0px 12px 24px;
    	display: inline;
    	}
    img.alignleft {
    	display: inline;
    	padding: 0px;
    	margin: 12px 24px 12px 0px;
    	}
    .aligncenter {
    	margin: 12px auto 12px;
    	}
    .alignright {
    	float: right;
    	margin: 12px 0px 12px 24px;
    	}
    .alignleft {
    	float: left;
    	margin: 12px 24px 12px 0px;
    	}
    .wp-caption {
    	background: #F9F9F9;
    	max-width: 100%;
    	text-align: center;
    	padding: 0px 0px 6px 0px;
    	margin-bottom: 12px;
    	border: 1px solid #DDDDDD;
    	}
    .wp-caption img {
    	max-width: 96%;
    	margin: 0px auto 0px;
    	padding: 6px 6px 0px 6px;
    	}
    .wp-caption p.wp-caption-text {
    	display: inline;
    	font-size: 0.8em;
    	line-height: 1.6;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	}
    .postarea.full .featureimg img,
    .postarea.full .featurevid,
    .postarea.blog-full .featureimg img,
    .postarea.blog-full .featurevid,
    .postarea.blog-small .featureimg img,
    .postarea.blog-small .featurevid {
    	display: block;
    	text-align: center;
    	margin: 12px auto 12px;
    	overflow: hidden;
    	}
    .postarea.portfolio .featureimg,
    .postarea.portfolio .featurevid {
    	text-align: center;
    	line-height: 0;
    	margin: 0px auto 0px;
    	overflow: hidden;
    	}
    .postarea .featureimg.page img {
    	float: left;
    	margin: 0px 30px 30px 0px;
    	}

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link to one site where it works in a similar context?

    Try changing the class to “centered”

    Change .aligncenter to this:

    .aligncenter {
        display: block;
        margin: 12px auto 12px;
    }
    Thread Starter lmadiou

    (@lmadiou)

    Andrew my other site where it works: http://lwonder.com/robyn/

    Dave, that didnt fix it unforunately.

    Stacy, where do I do that, in the code from above or elsewhere?

    thanks all!

    When I insert images into posts the vertical ones are not centered even with <img class=”aligncenter added.

    I’m not sure where you put this code? Did you hard code it into the page or did your choose center alignment on the “Image Details” page?

    You can edit the class in your text editor by changing “aligncenter” in the above code to “centered”. Or you can change it in your visual editor by clicking on the picture, opening up the editor and clicking “none” for alignment. Then go to advanced options and in the CSS class box, type in centered.

    Hope this works!

    Thread Starter lmadiou

    (@lmadiou)

    Once I’ve inserted images into the post, if I click on the Text tab, as oppsed to the default Visual tab, each image starts off with <img class="aligncenter which is part of why I dont understand why its not working.

    I dont remember hard-coding it to do that but I remember playing around with image upload settings, but cant remember what those were.

    http://codex.wordpress.org/Wrapping_Text_Around_Images

    add:
    img.aligncenter { display: block; }

    for further questions regarding your theme, please contact the theme’s developer directly;

    http://codex.wordpress.org/Forum_Welcome#Commercial_Products

    Thread Starter lmadiou

    (@lmadiou)

    I’m at a loss, nothing seems to be working.

    If I align left, it does that correctly, if I align right it does that correctly but align center it defaults to left.

    The only way Ive gotten it to work, which I am tired of doing manually is adding <p style="text-align: center;"> before my image and </p> after.

    Anyone know where I can adjust how images are treated when they are uploaded?

    @alchymyth’s solution will work. The problem is because the images are not being set as display: block; for some reason. If I add this to an image that is left then it moves into the centre.

    Try this Jessica,

    Insert the following code into your post:

    If you look carefully I have changed the class to “centered”.

    The centered class is already in your CSS file and changes the images to block and aligns them to the center. When you place your images into a post using the media uploader, choose alignment “none”. Then in the text editor change the class “alignnone” to “centered”.

    <img class="size-full wp-image-2576 centered" alt="brandon jessica maternity_002" src="http://eyewonderphotography.com/wp-content/uploads/2014/07/brandon-jessica-maternity_002.jpg" data-jpibfi-indexer="2"></img>

    Stacy

    Thread Starter lmadiou

    (@lmadiou)

    I appreciate everyone still trying to help on this issue!

    So StacyDuval, that definitely works however the manual adjustment is what I am trying to avoid.

    I dont know it well enough but isnt there something in the functions.php that should be able to fix this issue?

    I found this on another thread, but not sure how/where to

    http://wordpress.org/support/topic/insert-media-attachment-display-settings-set-a-default?replies=5

    I’m also working with the theme developers to see if they can assist.

    thanks again

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Images not centered’ is closed to new replies.