1


vertical-align: middleCSSの奇妙な おかげで、これは不必要に困難です。（直感に反しますが）画像の横にテキストを垂直方向に中央揃えにする場合は、テキストではなく画像に対してこれを行う必要があることを理解しています...

このアプローチは、テキストがspanコンテナ内にある場合にのみ機能するようです。画像はimgタグで定義されており、どちらもdivコンテナ内にあります。

そうは言っても、Googleマップに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>

情報ウィンドウ内にストリートビューディスプレイを配置する方法については、こちらをご覧ください。

4

1 に答える 1

2


ですから、思ったよりずっと簡単line-heightでした。ストリートビューの div で指定された高さと同じ属性を、テキストの CSS で設定する必要があります。それだけです。テキストは「垂直方向に中央揃え」になります。 

/* 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 に答える