如何將我的谷歌地圖信息 window 內容居中？

Question

我在這里有這個stackblitz ，它打開了一個谷歌地圖信息 window。 我已刪除（隱藏）關閉按鈕，但 window 在右側填充和/或邊距上仍然關閉。

如何將位於信息 window 中的引導卡居中？

Answer 1

右側的額外空白是通過以下樣式添加的：

<div class="gm-style-iw-d" style="overflow: scroll; max-height: 508px;">
                                  ^^^^^^^^^^^^^^^^

這意味着瀏覽器始終顯示滾動條，無論是否實際剪切了任何內容。 滾動條在這里對用戶不可見，因為它幾乎沒有用谷歌地圖定制。

您應該將其更改為overflow: auto ：

:host ::ng-deep .gm-style-iw-d {
  overflow: auto !important;
}

另一個問題位於此處：

<div class="gm-style-iw gm-style-iw-c" style="padding-right: 0px; padding-bottom: 0px;
                                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

如您所見，右側的填充已刪除。 您應該將它們保持原樣（ 12px ）：

:host ::ng-deep .gm-style-iw-c {
    padding-right: 12px !important;
    padding-bottom: 12px !important;
}

解決方案的最后一部分是從卡片中刪除硬編碼的寬度：

<div class="card" style="width: 18rem;">
                         ^^^^^^^^^^^^^
                         remove this

因此默認情況下卡片的寬度為 100%。

分叉的 Stackblitz