如何使用 HTML Help Workshop 将 HTML 中的图片居中？

Question

我正在使用 HTML HELP Workshop 创建帮助文件。 我的问题是当我在 HTML 中居中图像时，图片总是出现在 CHM 文件的最左侧。 但是我在 Internet 浏览器 (Internet Explorer) 中找到了中间的图像。

我希望图像放置在 CHM 文件和 Internet 浏览器的中心。 这是我的 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>

Answer 1

您需要使用例如您喜欢的文本编辑器在<head>部分添加以下行。

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

请注意，Windows 7（以及所有其他最新版本的主要浏览器）上的 IE9 可以正确呈现您在问题中使用的内容。

不幸的是，如果您获取您的内容并通过 HTML Help Workshop 编译器运行它以生成 CHM 文件，则在同一台机器上的结果输出看起来有点不同。 请注意 CHM 已有 20 年的历史！

尽管页面显示和功能在 Microsoft Windows 帮助查看器中仍然有效，但所有额外的样式功能都消失了。 即使在安装了 IE11 的 Windows 10 Home Version 1903 机器上运行测试，应该能够呈现这些 CSS 功能也是如此。

今天使用您发布的原始 HTML 代码进行测试，使用 FAR HTML 和 HTMLHelp Workshop 安装在我的机器上。

在 CHM 文件中使用 SVG 还需要从上面添加<meta>标记。

对以下问题给出了全面的答案：

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 有什么作用？

Answer 2

您可以尝试使用margin: 0 auto; 而不是margin-left: auto; & margin-right: auto;

如何使用 HTML Help Workshop 将 HTML 中的图片居中？

问题描述

2 个解决方案

解决方案1
0 2019-07-31 17:00:05

解决方案2
0 2019-08-01 08:10:06

如何使用 HTML Help Workshop 将 HTML 中的图片居中？

问题描述

2 个解决方案

解决方案1 0 2019-07-31 17:00:05

解决方案2 0 2019-08-01 08:10:06

解决方案1
0 2019-07-31 17:00:05

解决方案2
0 2019-08-01 08:10:06