css - 如何在信息窗口内将 Google StreetView 显示与文本垂直对齐？-6ren

css - 如何在信息窗口内将 Google StreetView 显示与文本垂直对齐？

转载作者：行者123 更新时间：2023-11-28 13:25:30

由于 CSS 的 vertical-align: middle 古怪之处，这是不必要的困难。我明白(虽然违反直觉)如果您想在图像旁边垂直居中放置文本，您必须对图像执行此操作而不是文本...

似乎这种方法只适用于文本位于 span 容器中，图像由 img 标记定义，并且它们都位于 div< 中的情况 容器。

话虽如此，我在 Google map 中有一个信息窗口，其中包含一个位于 Google 街景显示(图像？)左侧的地址(文本)。但是，街景对象不是 img 标记，而是位于 span 容器中。

这是相关代码:

<!DOCTYPE html>
<html>
    <head>
        <title>address and street-view inside an infowindow</title>

        <style type = "text/css">
            *
            {
                margin: 0px;
                padding: 0px;
            }
            html, body
            {
                height: 100%;
            }

            #map_canvas
            {
                min-height: 100%;
            }

            /* inside infowindow */
            #userAddress
            {
                float: left;
            }
            #street_canvas
            {
                float: right;

                width: 100px;
                height: 100px;

                vertical-align: middle;
            }
        </style>
    </head>
    <body>

        <!-- map here -->
        <div id = "map_canvas"></div>

        <!-- Google Maps API -->
        <script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?&amp;sensor=true&amp;v=3.9"></script>

        <script type = "text/javascript">

            var map;
            initialize();

            function initialize()
            {
                var mapOptions =
                {
                    center: new google.maps.LatLng(37.09024, -95.712891), // coordinates for center of the United States
                    zoom: 4, // smaller number --> zoom out
                    mapTypeId: google.maps.MapTypeId.TERRAIN // ROADMAP, SATELLITE, TERRAIN, or HYBRID
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            } // end of initialize

            var coordinates = new google.maps.LatLng(37.414341, -122.07692159999999);
            var address = "1401 North Shoreline Boulevard Mountain View, CA 94043";
            setMarker(coordinates, address);

            function setMarker(userCoordinates, userAddress)
            {
                var panorama = null;

                // user address map marker created here
                var marker = new google.maps.Marker(
                {
                    map: map, // from the global variable
                    position: userCoordinates
                });

                // infowindow created here
                var windowInfo = "<div>" + 
                                    "<span id = 'userAddress'>" + userAddress + "</span>" +
                                        "<span id = 'street_canvas'></span>" +
                                "</div>";

                var infoWindow = new google.maps.InfoWindow(
                {
                    content: windowInfo
                });

                    function setStreetView(infoWindow, userCoordinates)
                    {
                        google.maps.event.addListener(infoWindow, "domready", function()
                        {
                            if(panorama !== null)
                            {
                                panorama.unbind("position");
                                panorama.setVisible(false);
                            }

                            // options for streetview inside map marker
                            var panoramaOptions =
                            {
                                position: userCoordinates,
                                pov:
                                {
                                    heading: 45, // northwest in degrees
                                    zoom: 1,
                                    pitch: 1 // 0 degrees is level
                                },

                                // removing all map controls
                                addressControl: false,
                                clickToGo: false,
                                enableCloseButton: false,
                                imageDateControl: false,
                                linksControl: false,
                                panControl: false,
                                scrollwheel: false,
                                zoomControl: false,

                                disableDoubleClickZoom: true
                            };

                            // initializing streetview and settings to global variable
                            panorama = new google.maps.StreetViewPanorama(document.getElementById("street_canvas"), panoramaOptions);
                            panorama.bindTo("position", marker);
                            panorama.setVisible(true);

                        });
                    } // end of setStreetView

                setStreetView(infoWindow, userCoordinates);

                // event listener for infowindow of map marker, onclick
                google.maps.event.addListener(marker, "click", function()
                {
                    infoWindow.open(map, this);
                    map.panTo(this.position);
                });

                // event listener for closing infowindow of map marker
                google.maps.event.addListener(infoWindow, "closeclick", function()
                {
                    // disable streetview, with the global variable
                    panorama.unbind("position");
                    panorama.setVisible(false);
                    panorama = null;
                });
            } // end of setMarker
        </script>
    </body>
</html>

参见 this有关将街景显示放在信息窗口内的引用。

最佳答案

因此，这比我想象的要容易得多——必须在文本的 CSS 中设置一个 line-height 属性，等于街景 div 指定的高度。就是这样，文本然后“垂直居中”:

/* inside the infowindow */
#userAddress
{
    float: left;

    line-height: 100px;
}
#street_canvas
{
    float: right;

    width: 100px;
    height: 100px;
}

在这种情况下不需要 vertical-align: middle。

关于css - 如何在信息窗口内将 Google StreetView 显示与文本垂直对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13977286/

文章推荐： html - 可以向跨浏览器的 html 选项添加填充吗？

文章推荐： JavaScript : Undefined before an array

文章推荐： swift - iOS 13 - UIMenu 是否存在不显示其图像的错误？

Android MediaPlayer 信息/警告 (703, 0) 信息/警告 (701, 0) 慢速 wifi 或数据连接
03-25 05:52:15.329 8029-8042/com.mgh.radio W/MediaPlayerNative: info/warning (703, 0) 03-25 05:52:15
c# - FrameworkElementFactory 信息
我一直在 Internet 上到处寻找关于 FrameworkElementFactory 类的适当文档，但我似乎找不到有关它的适当教程或有用信息。请问对这个问题了解更多的人可以给我更多的信息吗？这
c - 如何在线程之间发送变量/信息
我需要知道一个线程在进入等待状态之前如何将其ID发送到另一个线程。我想传递一个带有其ID的变量，但我不知道该怎么做。最佳答案如果只有一个线程及其父线程，则可以使用全局变量，因为它们在所有线程之间共
rust - 如何阅读打印品前的文字!信息？
我正在尝试制作一个程序，该程序可以读取命令行上的所有单词，然后将其打印在新行上，而我想要做的是这样的: Some text: hello 但是相反，我得到了这样的东西: Some text: Hell
rabbitmq - 如何获取有关rabbitmq连接操作的详细日志/信息？
我有一个连接到rabbitmq服务器的python程序。当该程序启动时，它连接良好。但是当rabbitmq服务器重新启动时，我的程序无法重新连接到它，并留下错误“Socket已关闭”(由kombu产生
kubernetes - 如何在CD输出中包含Pod启动日志/信息？
我正在设置CI / CD管道。部署步骤运行以下命令: kubectl apply -f manifest.yml --namespace kubectl rollout status Deploym
java - 如何在java中使用ews从电子邮件中获取 "To"信息
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
SVN 信息 - 我上次更改的日期在我的文本上次更新日期之前
这是我在文件上运行 svn info 时输出的一部分: Last Changed Author: [user] Last Changed Rev: 269612 Last Changed Date:
java - android制作一个音乐应用程序访问sd卡以获取音乐数据帮助/信息
所以我正在构建这个音乐应用程序，到目前为止它只扫描 SD 卡内的特定文件夹。这将返回路径，然后播放它们。几个小时前我得知android系统中有一个媒体文件数据库所以我想知道这个媒体文件数据库是否存
python - 如何在树状图上添加%信息？
我正在绘制树形图，并且想知道如何绘制树类的相对百分比，即 A组=100 B地=30 C地=50 D 地 =20 然后，在图中，应该添加: A 组“50%” B 组“15%” 等在其“Group X”标
php - 如何在用户首次登录时显示教程/信息？
我正在构建一个社交网站，我想知道如何在用户首次登录时显示交互式教程和信息。比如只有在第一次登录时，用户才会被要求在他们的个人资料中填写更多信息。我怎样才能通过 php 和 mysql 实现这一点？例子
java servlet 信息
我是 java servlet 的新手。我研究了一些关于 servlet 的代码，但我真的很想知道更多基本的东西以及它是如何工作的。我只是想知道什么类型的 Material /内容可以从 java s
mysql - 避免多个内部联接从同一个表添加新列(信息)
我想知道是否有办法为 user_id、sender_user_id 和 recipient_user_id 提供 name 信息来自 this fiddle 中的模式. 我现在唯一能想到的办法就是做这
c++ - 存储2人c++信息
这是我存储2个大学生信息的源代码。我想从输入中获取每个人的姓名、姓氏、ID 和 5 分，然后在输出中显示它们。我在输出中显示分数时遇到问题。请帮忙 #include using namespace
python - 从图像中提取统计数据/信息
假设我有一张带有条形图的图像，如下所示: 我想提取条形图和标签的值，除了训练 ML 模型之外，还有其他方法吗？我有一堆图像，我为其生成了图表和一些描述。我目前正尝试仅从我能够做到的描述中提取信息，但
iphone - GKTurnBasedParticipant 信息
有没有办法从 GKTurnBasedParticipant 对象中检索玩家的名字？似乎除了根据类引用的难看的 playerID 之外，没有办法显示有关游戏玩家的相关信息。还是我遗漏了什么？谢谢...
c# - KeyNotFoundException 信息
我有一个随机抛出“KeyNotFoundException”的 C# Silverlight 应用程序。我不知道找不到什么 key 。这让我想到了两个问题: KeyNotFoundException
iOS获取本地音频文件(属性/信息)
本文实例为大家分享了ios获取本地音频文件的具体代码，供大家参考，具体内容如下获取本地音频文件地址： ?
Sql查询MySql数据库中的表名和描述表中字段(列)信息
下面为大家介绍利用SQL查询语句获取Mysql数据库中表的表名，表描述、字段ID、字段名、数据类型、长度、精度、是否可以为null、默认值、是否自增、是否是主键、列描述 1、查询表信息（表名/表
c# - 是否有可能获得例如代码中的位置成员(member)信息？
问题有没有办法获取代码中使用属性的位置，或声明成员变量的位置？我不是在寻找解决此问题的方法，只是寻求一个简单的答案，无论这在技术上是否可行。一些背景信息我已经定义了一个属性，该属性使用提供给属

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何在信息窗口内将 Google StreetView 显示与文本垂直对齐？