时间戳

首页 > 解决方案 > 将 Google Map iFRAM 放置在 HTLM 表行的页面中心

html - 将 Google Map iFRAM 放置在 HTLM 表行的页面中心

问题描述

我正在使用 angular.js 并将 iram 放在我的 html 表格行中，它没有出现在页面的中心。 在此处输入图像描述

我正在使用此代码

 <tr>
        <td>
         
         <iframe id="myIframe"
            [src]="'https://maps.google.com/maps?q='+rfq.latitude+','+rfq.longitude+'&hl=es;z=18&amp;output=embed' | safe"
            width="100%" 
            height="450" 
            frameborder="0"
       ></iframe>
        </td>
      </tr>

我怎样才能把这张地图全权重放在页面的中心

标签： htmlangularjsiframehtml-table

解决方案

我不知道如何以角度添加 css，但您可以简单地使用它position: absolute来使 iframe 居中。
您还可以从已 编辑的代码 中删除height和删除 我已经看到您的代码、您在添加时做错了什么以及标签之外的其他 css 属性。如果你看看我的代码你就会明白。 widthiframe

widthheightstyle

<iframe id="myIframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30704255.110777132!2d64.3828365886956!3d20.047174681973626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1604400347555!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="width: 100%; position: absolute; height: 300px;left: 50%;top: 50%;transform: translate(-50%,-50%)"  allowfullscreen="" aria-hidden="false" tabindex="0" ></iframe>

这是codeandbox的链接

让我知道它是否不适合你。

推荐阅读