This is unnecessarily difficult, thanks to CSS's vertical-align: middle oddities. I understand (though counter-intuitive) that if you want to vertically center text next to an image, you must do this to the image and not the text...
It seems that this approach only works when the text is in a span container, the image is defined by an img tag, and they are both within a div container.
That being said, I have an infowindow in Google Maps that contains an address (text) to the left of a Google StreetView display (image?). However, instead of the img tag the street view object is in a span container.
Here is the relevant code:
<!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?&sensor=true&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>
See this for a reference on putting a streetview display inside of an infowindow.
So, it was much much easier than I thought -- a line-height attribute must be set in the CSS for the text, equal to the height specified by the streetview div. And that's it, the text is then "vertically centered":
/* inside the infowindow */
#userAddress
{
float: left;
line-height: 100px;
}
#street_canvas
{
float: right;
width: 100px;
height: 100px;
}
There is no need for vertical-align: middle in this case.