Thank you for all your replies.
I'm fine if it doesn't work with all apps and devices. It's fine if it works only on tables and computers (whatever have the needed dimensions).
However, I can make the images stick together in the horizontal center. Please, see the screenshot below.
Here's what I'm trying:
Code:
img {
display:block;
height:100%;
max-height:100%;
width:auto;
max-width:100%;
}
.container {
page-break-inside:avoid;
text-align:center;
vertical-align: middle;
display: inline-block;
width: 100%;
height: 100%;
}
.container-right {
page-break-inside:avoid;
text-align:right;
vertical-align: middle;
display: inline-block;
width: 100%;
height: 100%;
}
.container-left {
page-break-inside:avoid;
text-align:left;
vertical-align: middle;
display: inline-block;
width: 100%;
height: 100%;
}
HTML:
Code:
<div class="container-left">
<img align="left" alt="" src="Pictures/capitaotheo-25.jpg"/>
</div>