Centering images in html using tex4ht

Question

I am trying to convert latex doxument in html using tex4htand to get centered image. I am inspired by the code in the post here I use the following .tex file

\documentclass[12pt,a4paper,twoside]{book} \usepackage[francais]{babel}
\usepackage[latin1]{inputenc}
\usepackage{lmodern}
\usepackage{graphicx}
\usepackage{color}
\usepackage{float}
\usepackage{tex4ht}
\newtheorem{exemple}{Exemple}[chapter]
\newcommand\inputpstex[1]{\input{#1.pstex_t}}
\newcommand{\myTexFigure}[2]{
      \vspace{3mm}
    \begin{figure}[!h]
    \centering
    \inputpstex {#1}
    \caption{#2}\label{f:#1}
    \end{figure}
      \vspace{3mm}
      }
\title{Test}
\author{S.~Oulhoussine}
\begin{document}
\maketitle
\chapter{Introduction}
\section{Calcul}
Ceci est un test
\begin{exemple}[Pendule simple]
figure d'un pendule
\begin{figure}[!h]
  \centering
  \includegraphics[width=2cm]{pendule.ps}\\
  \caption{Image d'un pendule}
\end{figure}
\begin{equation}\label{linvar:e}
5 \cos (t) \frac{{dy(t)}}{{dt}}+ 3  y(t) = 10 u(t)
\end{equation}
\end{exemple}
L'exemple est déjà fini.
\end{document} 

I converted using the command line

make4ht -c my.cfg test.tex

with the the following configuration file my.cfg

\Preamble{xhtml}
\Css{div.caption{text-align:center;}}
\Css{div.figure img {text-align:center;display:block;margin-left:auto; margin-right: auto;}}
\begin{document}
\EndPreamble

Here are the pendule.ps and pendule.pstex_t files. I get this html file As you can see, the html figure is not centerd. Can you help please ?

Answer 1

The CSS code in your config file is correct, it just conflicts with one CSS declaration in TeX4ht sources:

 \Css{.figure img.graphics {margin-left:10\%;}}

This sets left margin of the image to 10% of the page width. I don't really know why it is there, it seems like a really old declaration that is not useful anymore. So I will remove it from the sources. To fix it at the moment, you can override it using CSS declaration that will have higher specificity than the declaration above:

 \Css{figure.figure img.graphics {text-align:center;display:block;margin-left:auto; margin-right: auto;}}

This is the result with a different image: