How to center an isolated image horizontally and vertically in epub, manually?

draconisgaleon · 01-18-2024, 09:04 PM

I'm new to creating ebooks and I'm currently creating one in epub format, manually, my first experience.

Following the explanations available here and elsewhere on the internet, I was able to successfully add the cover using svg. Using this code:

Code:

<div>
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
       viewBox="0 0 768 1276" preserveAspectRatio="xMidYMid meet" width="100%" height="100%">
       <image xlink:href="images/cover.jpg" width="100%" height="100%" />
     </svg>
</div>

In this case, the cover image occupies the entire screen, however there is an image that I want to add, as a cover page, whose size is 400 x 442, so that it is centered vertically and horizontally.

Aligning horizontally is not complicated using just HTML and even vertically with more modern CSS solutions, but for now I'm trying to avoid using CSS due to possible limitations that some e-readers may have regarding this styling language.

An alternative would be using tables, right? But I read in some thread on this forum that it would be better to stay away from this type of practice when it comes to images.

So what am I left with? Use the same svg code above, making changes?

I admit that the use of svg is still cloudy for me, but with the help of chatGPT

, I obtained the following code that seems to have worked for this purpose on my browser screen, including on a custom screen that I added to the " Toogle device toolbar" within Inspect, to simulate the size of my Kindle (600 x 800):

Code:

<div style="text-align: center;">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height ="100%" viewBox="0 0 400 442" preserveAspectRatio="xMidYMid meet">
             <image xlink:href="images/draconisgaleon.jpg" x="25%" y="25%" width="50%" height="50%" />
         </svg>
</div>

Result: https://imgur.com/a/uBy8sVS

What do you think about this?

Thank you very much.

draconisgaleon

RbnJrg · 01-18-2024, 11:00 PM

Quote:

What do you think about this?

Thank you very much.

draconisgaleon

Read the following post:

https://www.mobileread.com/forums/sh...0&postcount=37

draconisgaleon · 01-19-2024, 10:44 AM

Quote:

Originally Posted by RbnJrg

Read the following post:

https://www.mobileread.com/forums/sh...0&postcount=37

I understood the logic behind your tutorial, but setting my image to take up the entire available dimension on the screen, like a cover, wasn't exactly what I was looking for, although it was helpful to learn a new approach.

Anyway, your code was useful because I finally managed to align my image in the center of the screen, without it being resized by svg to occupy the entire width and height of the device thanks to incorporating your css into my html svg, like this:

Code:

<head>
    <title></title>
    <style>
        .cover {
    margin: 0;
    height: 99vh; /* This property is for epub3 */
    max-width: 100%; /* This property is for epub3 */
    overflow: hidden !important;
}
  
.picWrapper {
    margin: 0;
    padding: 0;
    height: 100%; /* This property is for epub3 */
}
  
.pic { /* This is the epub2 layer */
    display: block;
    margin: auto;
    width: 100%;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}
    </style>
</head>

<body class="cover">
    <div style="text-align: center;" class="picWrapper">
        <svg class="pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 400 442" preserveAspectRatio="xMidYMid meet">
            <image xlink:href="images/draconisgaleon.jpg" x="25%" y="25%" width="50%" height="50%" />
        </svg> 
    </div>
</body>

I made two gifs with the before and after for better understanding.

The result I want is being displayed in the "after" gif.

Note that I had marked my stylesheet.css in the header as a comment, to show you how the svg was behaving before incorporating your css suggestion. After removing the comment, the css came to contribute to the final result.

I must thank him for that.

It's resolved.

draconisgaleon · 01-19-2024, 10:53 AM

The gifs I sent above are not displayed, so I will add the .avi video files here.

RbnJrg · 01-19-2024, 04:17 PM

Well done. There are several ways to center an image verically and horizontally on a single page (maybe some of them easier than the posted one) but the code you are going to use it works everywhere (epub2, epub3 and practically on any ereader) so if you don't know where the epub is going to be opened (the common case) is the best choice. Glad you was able to solve your issue.

01-18-2024, 09:04 PM	#1
draconisgaleon Junior Member Posts: 3 Karma: 10 Join Date: Jan 2024 Device: Kindle 10th Gen	How to center an isolated image horizontally and vertically in epub, manually? I'm new to creating ebooks and I'm currently creating one in epub format, manually, my first experience. Following the explanations available here and elsewhere on the internet, I was able to successfully add the cover using svg. Using this code: Code: <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 768 1276" preserveAspectRatio="xMidYMid meet" width="100%" height="100%"> <image xlink:href="images/cover.jpg" width="100%" height="100%" /> </svg> </div> In this case, the cover image occupies the entire screen, however there is an image that I want to add, as a cover page, whose size is 400 x 442, so that it is centered vertically and horizontally. Aligning horizontally is not complicated using just HTML and even vertically with more modern CSS solutions, but for now I'm trying to avoid using CSS due to possible limitations that some e-readers may have regarding this styling language. An alternative would be using tables, right? But I read in some thread on this forum that it would be better to stay away from this type of practice when it comes to images. So what am I left with? Use the same svg code above, making changes? I admit that the use of svg is still cloudy for me, but with the help of chatGPT , I obtained the following code that seems to have worked for this purpose on my browser screen, including on a custom screen that I added to the " Toogle device toolbar" within Inspect, to simulate the size of my Kindle (600 x 800): Code: <div style="text-align: center;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height ="100%" viewBox="0 0 400 442" preserveAspectRatio="xMidYMid meet"> <image xlink:href="images/draconisgaleon.jpg" x="25%" y="25%" width="50%" height="50%" /> </svg> </div> Result: https://imgur.com/a/uBy8sVS What do you think about this? Thank you very much. draconisgaleon Last edited by draconisgaleon; 01-18-2024 at 09:05 PM. Reason: Image was not displayed correctly

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
horizontally center table in mobi7?	lumpynose	Kindle Formats	7	08-22-2019 09:16 PM
How to center an image vertically	GBAV	ePub	31	08-01-2018 01:57 PM
How do you vertically center a text?	Julius Caesar	Workshop	9	09-08-2013 02:58 PM
How do you center text vertically?	44reader	ePub	8	08-06-2012 01:52 PM
Can you center vertically?	bfollowell	ePub	10	07-07-2011 03:19 AM

01-19-2024, 04:17 PM	#5
RbnJrg Wizard Posts: 1,544 Karma: 6613969 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Well done. There are several ways to center an image verically and horizontally on a single page (maybe some of them easier than the posted one) but the code you are going to use it works everywhere (epub2, epub3 and practically on any ereader) so if you don't know where the epub is going to be opened (the common case) is the best choice. Glad you was able to solve your issue.