简体   繁体   中英

How to Center a picture in HTML using HTML Help Workshop?

I'm using HTML HELP Workshop to create help file. My problem is when I center an image in HTML, the picture always appears placed in the extreme left of the CHM file. But I've found the image in the middle in the internet browser (Internet Explorer).

I want the image to placed in the center of CHM file and Internet browser. This is my HTML:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
   <HEAD>
      <meta name="GENERATOR" content="Microsoft&reg; HTML Help Workshop 4.1">
      <Title>Picture</Title>
   </HEAD>
   <style> 
      img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      } 
   </style>
   <BODY><img src="C:\Users\LENOVO\Desktop\cd\help\Graph.htm_Images\image.png" alt="Home Appliances Data " ;></BODY>
</HTML>

You need to add following line in your <head> section by using eg your favorite text editor.

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

Please note that IE9 on Windows 7 (and all other recent versions of the major browsers) can properly render your content used in your question.

Unfortunately if you take your content and run it through the HTML Help Workshop compiler to produce a CHM file the resulting output on the same machine looks a bit different. Please note CHM's are 20 years old!

Although the page display and functionality still works inside the Microsoft Windows Help Viewer, all the extra styling features are gone. This is true even though running a test on a Windows 10 Home Version 1903 machine that has IE11 installed that should be able to render these CSS features.

Tested today with the original HTML code you posted, using FAR HTML and HTMLHelp Workshop installed on my machine.

Adding the <meta> tag from above is also needed for using SVG inside CHM files.

A comprehensive answer was given for following question:

What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

You could try to use margin: 0 auto; instead of margin-left: auto; & margin-right: auto;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM