将 Google Map iFRAME 放置在 HTML 表格行的页面中心答案

【问题标题】：Placing Google Map iFRAM to center of page in HTLM table row将 Google Map iFRAME 放置在 HTML 表格行的页面中心
【发布时间】：2021-02-15 21:16:43
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： html angularjs iframe html-table

【解决方案1】：

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

&lt;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" &gt;&lt;/iframe&gt;

Here's the link of codesandbox

如果它不适合你，请告诉我。

【讨论】：

它不起作用 maps.google.com/…' | safe" frameborder="0" width="100%" height="200px" position="绝对“top="50%" left="50%" transform="translate(-50%,-50%)" style="border:0" allowfullscreen="" aria-hidden="false" tabindex="0 " >
请问您是如何将谷歌地图嵌入到您的页面的？您是否尝试将 css 添加到 iframe 标记？最后..你有前端开发经验吗？谢谢
我正在使用此代码我在前端开发方面没有太多经验，我是后端、移动、应用程序和网络应用程序开发人员
@ShoaibAnwar 对不起，我没有任何支持经验，但经过一些研究，我确实解决了你的问题，看看我编辑的代码。谢谢
感谢它的全宽，但它覆盖了我在页面上的另一行 i.ibb.co/RbrHgyF/Screen-Shot-2020-11-04-at-9-59-33-AM.png