Ask Your Question
0

Images won't stay centered in html

asked 2015-08-19 13:14:32 +0200

MichaelPalin gravatar image

updated 2015-08-21 14:21:35 +0200

Alex Kemp gravatar image

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.

image description image description

[edit: added lo4 + ubuntu tag]

edit retag flag offensive close merge delete

2 Answers

Sort by » oldest newest most voted
1

answered 2015-08-19 23:32:45 +0200

Regina gravatar image

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.

edit flag offensive delete link more
0

answered 2015-08-19 17:42:06 +0200

peterwt gravatar image

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.

edit flag offensive delete link more

Comments

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.

MichaelPalin gravatar imageMichaelPalin ( 2015-08-19 23:50:45 +0200 )edit

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.

peterwt gravatar imagepeterwt ( 2015-08-21 00:27:49 +0200 )edit
Login/Signup to Answer

Question Tools

1 follower

Stats

Asked: 2015-08-19 13:14:32 +0200

Seen: 468 times

Last updated: Aug 21 '15