Question

由于CSS的vertical-align: middle奇怪，这是不必要的困难。我理解（虽然反直觉）如果你想垂直居中图像旁边的文字，你必须对图像这样做，不文本......

似乎此方法仅在文本位于span容器中时才有效，图像由img标记定义，并且它们都在div容器中。

话虽这么说，我在Google地图中有一个包含Google StreetView显示屏左侧地址（文本）的信息（图像？）。但是，街景视图对象位于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。

Answer 1

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

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

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

    width: 100px;
    height: 100px;
}

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

如何在信息窗口内垂直对齐Google StreetView显示屏？

1 个答案: