1


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

有关在 infowindow 中放置街景显示的参考，请参阅此内容。

4

1 回答 1

2


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

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

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

    width: 100px;
    height: 100px;
}


vertical-align: middle在这种情况下 没有必要。

于 2012-12-22T19:46:05.167 回答