如何使用 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