# Centering images in html using tex4ht

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}
$$\label{linvar:e} 5 \cos (t) \frac{{dy(t)}}{{dt}}+ 3 y(t) = 10 u(t)$$
\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 ?

• It seems the link to the pendule.ps file is missing. Apr 13, 2020 at 18:12

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:

• Thanks michal.h21 Apr 13, 2020 at 20:49
• I tested it and it worked very well. thank you again. Apr 13, 2020 at 23:54