将Google Map iFRAM放置在HTLM表行的页面中心 [英] Placing Google Map iFRAM to center of page in HTLM table row

问题描述

我正在使用angular.js并将ifram放在html的表格行中，它没有出现在页面中心.

i am using angular.js and putting ifram in my table row of html, its not appearing in the center of page.

我正在使用此代码

 <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>

如何将地图全权放置在页面中心

how can i place this map to center of page with full weight

推荐答案

我不知道如何在angular中添加CSS，但是您可以简单地使用以下 position:absolute 将iframe居中.
您还可以从 iframe
中删除 height 和 width 编辑代码
我看过您的代码，您在添加 width 和 height 以及其他css属性取代了 style 标记时，您做错了什么.如果您看一下我的代码，您将会理解.

I don't know how to add css in angular but you can simply use this position: absolute to center the iframe.
you can also remove height and width from iframe
Edited code
I have seen your code, what you were doing wrong that you were adding width and height and other css properties ouside the style tag. If you look at my code you'll understand.

<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的链接

让我知道它是否对您不起作用.

Let me know if it doesn't work for you.

这篇关于将Google Map iFRAM放置在HTLM表行的页面中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！