Images won't stay centered in html

[MichaelPalin]

Hi!

I’m writing a document with images in html in Libreoffice 4.4.2.2 (Ubuntu 15.04). They are inside a frame as I also need them to have text below (“caption”). I want them to be centered, with no text around, as their own paragraph (“no wrap”). However, every time I save and open again with Libreoffice, the images have been realigned to the left (image 1). In addition to this, when I open the .html document with a web browser, the image and the caption appear side by side (image 2) instead of the second one below the first one. Any idea how to solve this?

Thanks in advance.

[edit: added lo4 + ubuntu tag]

[Regina]

Put the image without frame into its own paragraph, anchor as character. Set the paragraph alignment to center in tab Alignment. Enable the paragraph property “Keep with next paragraph” in tab Text Flow. Write the capture of the picture in the next paragraph. If you do not know how to set the number range field manually, copy the caption from somewhere and correct its content. The text will not be aligned to the left edge of the picture, but the text will be centered too.

In HTML the img element is an inline element and cannot be centered by itself, but you have to center the surrounding block element, for example the paragraph. The frame should be exported as a centered div-element, but that is somehow broken.

[peterwt]

I am using LO 4.4.1.2 in Windows 8.

If I create a Writer document like yours with a frame centred containing an image and text below it retains this alignment after saving and opening again.

In html view I get the same as you get. If you leave the frame outline visible the html view shows an empty frame at the left hand side followed by the image then the caption. Looking at the html source shows that LO is not creating the correct code for Frames. In fact a Frame in html has a different and a frame must be part of a Frameset. The Frame is used to divide the browser window into sections (Frames) which contain different html documents.

The solution is to use a Table (1 column, 1 row) in the Writer document and place the image and caption in the single cell. Centre the Table and select no wrap. This renders correctly in html view - the html source shows the correct code for the creation of the Table. Tables are a normal part of web pages.

If you want to create Web pages LO is not really the application to use. A specialist website creator will produce better and more compact code. In this example the image is shown in the html source as:-

img src="data:image/jpeg;base64 followed by a huge hunk of the binary code that represents the Image

This would normally be just a reference to the image file in the web directory.

[MichaelPalin]

Yeah!, I have tried tables before. It does place the caption below the image, but tables cannot be centered (that I know of). The only way you can “center” a table (that I know of) is by reshaping it in the page until it looks like it is in the middle. However, you are placing the image in the middle of a A4 page in absolute numbers, not relative ones. Therefore, when opened in a web browser it appears just slightly to the right, not in the relative center of the browser.

[peterwt]

Put picture in 1 row 1 column Table. Drag right and left Table edges so they meet picture edges, In Table Format, Table Tab on right hand side Alignment - Centre.