如何将我的谷歌地图信息窗口内容居中？答案

【问题标题】：How can I center my google maps info window content?如何将我的谷歌地图信息窗口内容居中？
【发布时间】：2020-11-12 17:26:47
【问题描述】：

我在这里有这个stackblitz，它会打开一个谷歌地图信息窗口。我已移除（隐藏）关闭按钮，但窗口在右侧填充和/或边距上仍处于关闭状态。

如何将引导卡置于信息窗口的中心？

【问题讨论】：

卡信息窗口似乎在中心。究竟是什么问题？
如果你看，右边的空白比左边多。
如果您指的是卡片内的空白，那是因为它的样式中有max-width: 375px; width: calc(100% - 10px);。卡片中有多余的空间，因为文本不够长，无法换行。如果在浏览器低于 375 像素时缩小宽度，空白将消失。

标签： javascript html css angular google-maps-api-3

【解决方案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%。

Forked Stackblitz

【讨论】：

你好 yurzui。非常感谢，这有帮助。快速提问 - "::ng-deep" 是什么意思？
::ng-deep 组合器告诉 Angular 将样式应用于当前组件及其所有后代。如果没有它，样式将仅应用于组件自己模板中的 HTML。另见angular.io/guide/component-styles#deprecated-deep--and-ng-deep
在您的链接中说它已被弃用，我应该使用 :host >>> .class 代替吗？
它说你应该使用::ng-deep来自文档As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
尝试用max-width: 19.2rem !important;替换width: 19.2rem !important; 我更新了演示stackblitz.com/edit/…