Quote:
Originally Posted by azimuth
Yep JSW you're right again. I had to add a temporary colored border around each element just to see the problems. Reading about centering suggestions at an excellent codepen post has provided some interesting pointers.
Shaw's Codepen |
Please, since you have been testing code for a cover, could you tell me where the following code (for a cover) does not work:
1) In your css stylesheet:
Code:
.cover {
margin: 0;
height: 99vh;
max-width: 100%;
overflow: hidden !important;
}
.picWrapper {
margin: 0;
padding: 0;
height: 100%;
}
.pic {
display: block;
margin: auto;
width: 100%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
2) In your .xhtml file:
Code:
<body class="cover">
<div class="picWrapper">
<svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 10 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="800" width="600" xlink:href="../Images/Your_Cover.jpg"/></svg>
</div>
</body>
Of course, the values of the viewport (600 for width and 800 for height) inside the svg wrapper can be different AND must be changed according to the size of the cover image in px.
Regarding the code in CodePen many things are not applicable to epub and others are old. For example, under ePub3 with only three lines of code you can absolute center whatever; you don't need so much code.