Luminiscence Lite 1.1.9 alignment problem

I’m trying to duplicate what you are experiencing but unable to. On my local test site using version 1.1.9, I created a post, justified the post (the content), and also inserted an image between to paragraphs with the “align center” setting when I inserted it. I get justified content and the image is centered when I view the post on the front end.

This is not happening for you?

Could you please provide a link to a post or page that your image is not centering?

unfortunately not. I got someone else to try it on a wordpress but different theme and it turned out alright, so I thought it was the theme that I am using.

it is centering issue for me. I cannot use the button to center (and only happens when a picture is involved) but i have to go into the html and actually type out “<p style=”text-align: center;”>”.

this is my actual scenario text – picture – text…text is justified and picture centered. I do all these with the buttons available on the toolbar. When I preview it, the whole content and picture remains justified. I click on the picture properties and it still says center.

I then go into html and type <p style=”text-align: center;”> and have to insert </p> after the picture or else, I would get the text (justified), picture (center) and text beneath (center).

how can I provide you with the link because this all happens in the draft stage?

This is an example of my draft post in html…When I preview this, the pictures are all on left alignment.

I press the center alignment button, save it then preview it, the picture defaults back to being left alignment.

Unless I personally type in <p style=”text-align: center;”> at the beginning of each picture.

Thanks for looking into this!

<style type=”text/css”><!–
P { margin-bottom: 0.08in; }A:link { }
–></style>
<p align=”JUSTIFY”>Japanese tofu should be available in any Asian grocery shop in a tubular form in the cold section. Tofu is not necessary a vegetarian ingredient in Asia. Very often, it is paired with meat for both flavour and texture to the dish.</p>
<img class=”size-medium wp-image-4946 aligncenter” alt=”DSCF8294a” src=”https://www.vi-vian.com/wp-content/uploads/2014/01/DSCF8294a-200×300.jpg&#8221; width=”200″ height=”300″ />

<style type=”text/css”><!–
P { margin-bottom: 0.08in; }A:link { }
–></style>
<p align=”JUSTIFY”>Japanese tofu is particularly soft and not easy to handle. However, living abroad far from the achievable distance to my favourite dish makes me feel braver, encouraged and determined to tackle a difficult ingredient at home.</p>

<style type=”text/css”><!–
P { margin-bottom: 0.08in; }A:link { } –>Japanese tofu is particularly soft and not easy to handle. However, living abroad far from the achievable distance to my favourite dish makes me feel braver, encouraged and determined to tackle a difficult ingredient at home.
–></style><img class=”aligncenter size-medium wp-image-4947″ alt=”DSCF8288a” src=”https://www.vi-vian.com/wp-content/uploads/2014/01/DSCF8288a-300×200.jpg&#8221; width=”300″ height=”200″ />

you shouldn’t have to use the text alignment from the editor for the picture when you insert it. When you insert an image using the “Add Media” button, you select the image and before clicking to insert it into your post, there is an alignment setting in the lower right of the popup window. This is actually the method to insert the image. I’m taking it you are not using that?

Here is a screenshot of what I get when I insert and center the image using the method I explained. I also tried it using the centering of text from the editor without going into the HTML tab view.

Screenshot

Still not able to duplicate what you are experiencing though.

I did check on the alignment setting in the lower right of the popup window. It is by default “center”.

I posted the html format of one of my draft posts above.

I just looked at your source code…you should not have this in your content:

<style type=”text/css”><!–
P { margin-bottom: 0.08in; }A:link { }
–></style>

Here is a snippet of my html code:

<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dignissim mi. Sed sit amet fermentum sem. In interdum pellentesque pellentesque. Vivamus molestie sem ut nulla dictum volutpat.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-2720" alt="image" src="path-to-image.jpg" width="400" height="267" /></p>
<p style="text-align: justify;">Vestibulum sapien felis, elementum non condimentum et, dictum ut tortor. Phasellus elementum tincidunt commodo. Pellentesque et orci risus. Suspendisse adipiscing iaculis ipsum.</p>

I am not sure how that code appears. I just tried uploading other pictures but did not see that code anymore.

I looked at previous post and did not see that code neither.

Anyhow, I deleted those code and it did not make any difference to the picture alignment.

I normally write a document on open office. I copy and paste it into wordpress and upload pictures in between paragraphs. Will that have any effect on my alignment of pictures? I would guess not but this “way” when I create a new post.

Unless content has inline styling, it shouldn’t be affecting it. But it sounds like you don’t, so there is something else not working for you if your inserted images are not centering.

I honestly still cannot duplicate what you are experiencing and I tested this on my local test site using version 1.1.9, as you can see by the screenshot I provided earlier, the image is centered when I inserted it and set it to aligncenter with the text being justified.

Here is another test I did with the live demo site:

Centered Image

1. I uploaded the picture with no alignment intended:

<img class=”alignnone size-medium wp-image-4933″ alt=”DSCF8213a” src=”https://www.vi-vian.com/wp-content/uploads/2014/01/DSCF8213a-300×200.jpg&#8221; width=”300″ height=”200″ />

preview: no alignment

2. I uploaded the picture with no alignment but centered it:

<img class=”size-medium wp-image-4933 aligncenter” alt=”DSCF8213a” src=”https://www.vi-vian.com/wp-content/uploads/2014/01/DSCF8213a-300×200.jpg&#8221; width=”300″ height=”200″ />

preview: left alignment

3. I uploaded the picture with center alignment:

<img class=”aligncenter size-medium wp-image-4933″ alt=”DSCF8213a” src=”https://www.vi-vian.com/wp-content/uploads/2014/01/DSCF8213a-300×200.jpg&#8221; width=”300″ height=”200″ />

preview: left alignment

4. Previous pictures which have worked before:

<img class=”aligncenter” alt=”DSCF7746a” src=”https://www.vi-vian.com/wp-content/uploads/2013/12/DSCF7746a-300×200.jpg&#8221; width=”300″ height=”200″

preview: centre

I have noticed that recently when I upload pictures there is an additional command in the code which is the extra wordings of “size-medium wp-image-4933”. Could that mean something.

If you compare 1 & 2 & 3, they all have the same code but in scenario 4(old post) the code did not appear. I just looked at my blog and it has already messed up with all the other post before. Panic here!

Now I know… it’s your Pinterest plugin you are using, or whatever it is. This is what is doing it:

.pibfi_pinterest {
position: relative;
display: inline-block;
}

That class is using a display: inline-block and your image is wrapped in this, so the image alignment is being overwritten with that class from the plugin.

<span class="pibfi_pinterest ">
</span>

To cancel that out, you need to add some custom css like this:

.pibfi_pinterest {
display: block;
}

….but basically, that plugin’s class that is being used is the cause of your problems.

thank you so much for identifying this. I do not have very good computer skills. can you please guide me as to…

1. where should i add this custom css,

2. and why am I only experiencing this problem now when I had not made any amendments to the style or inserting/changing additional widget…

many thanks for spotting the problem!

I found the css for pintrest and have replaced the command that you suggested and voila, it worked! thank you s so much!

my blog is now back to normal, phew! but why am I only experiencing this problem now when I had not made any amendments to the style or inserting/changing additional widget…?

You’re very welcome and I am happy to hear everything is working for you again. To answer your question though, I would say it happened once you started using that Pinterest plugin, whether right at that point or after.

However, what is important is that now you have everything working and your images are centering ??

oh yes, thanks for spotting it again. I can resume my blogging!