如何将我的谷歌地图信息 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