Hi, I've got a bunch of html files that I want to convert to epub. In the html, I've got some text is in a table and I would like the whole table to be aligned in the center but the text aligned to the left. However, the table is always left aligned in the resulting epub. A sample of my html:
The converted html:
stylesheet.css:
page_style.css:
How can I edit my input HTML files so that it is converted correctly to epub and azw3? Thank you very much!
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<p align="center">
<b><font size="5">
Title Centered
</font></b>
</p>
<table align="center" style="text-align=left;">
<tr><td>
The text in this section<br>
should be aligned to the left<br>
But the whole paragraph<br>
should be centered!
</td></tr>
</table>
<p align="center">
<img height="40%" src="abc.png"/>
</p>
</body>
</html>Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<link href="page_styles.css" rel="stylesheet" type="text/css"/>
</head>
<body class="calibre">
<p class="calibre1">
<b class="calibre2"><span class="calibre3">
Title Centered
</span></b>
</p>
<table class="calibre4">
<tbody class="calibre5"><tr class="calibre6"><td class="calibre7">
The text in this section<br class="calibre8"/>
should be aligned to the left<br class="calibre8"/>
But the whole paragraph<br class="calibre8"/>
should be centered!
</td></tr>
</tbody></table>
<p class="calibre1">
<img src="abc.png" class="calibre9"/>
</p>
</body></html>Code:
.calibre {
display: block;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0
}
.calibre1 {
display: block;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: center
}
.calibre2 {
font-weight: bold
}
.calibre3 {
font-size: 1.41667em;
line-height: 1.2
}
.calibre4 {
border-collapse: separate;
border-spacing: 2px;
display: table;
margin-bottom: 0;
margin-top: 0;
text-align: center;
text-indent: 0
}
.calibre5 {
display: table-row-group;
vertical-align: middle
}
.calibre6 {
display: table-row;
vertical-align: inherit
}
.calibre7 {
display: table-cell;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: inherit;
vertical-align: inherit
}
.calibre8 {
display: block
}
.calibre9 {
height: 40%;
width: auto
}Code:
@page {
margin-bottom: 5pt;
margin-top: 5pt
}